У меня есть простая веб-страница для раздела условий и положений, в которой используется CSS.

Однако я не могу сделать blueBox шире или длиннее.

Я попытался настроить высоту и ширину с помощью CSS, но ширина и длина не меняются. Можете ли вы помочь мне?

Вот индексная страница.

<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>
        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>
        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>

CSS

html{
  overflow: hidden;
  height: 99%;
}
body{
  height: 99%;
}
#mainContentArea{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  overflow: hidden; 
  width: 600px;
}
.link,.linkActive{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  background-image:url(tab.gif);
  position:relative; bottom:0px;
}
#linkGroup{
  margin-right:10px;
  height:40px;
  width:600px;
}
#title{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  text-align:center;
  float:left;
}
.contentTitle{
  margin-left:15px;
  margin-right:12px;
  margin-bottom:12px;
  width:573px;
}
.pageContent{
  font-family: Arial, Helvetica, sans-serif;
  margin-left:20px;
  margin-right:20px;
  width:560px;
  height:auto;
}
#blueBox{
  position: absolute;
  vertical-align: middle;
  background-color:#E7EDF8;
  width:600px;
  clear:both;
  height:auto;
}
#header{
  width:600px;
  height:20px;
  background-color:#FFFFFF;
  background-image:url(header.gif);
  background-repeat:no-repeat;
}
#footer{
  width:600px;
  height:20px;
  background-color:#FFFFFF;
  background-image:url(footer.gif);
  background-repeat:no-repeat;
  text-align:center;
  padding-right:10px;
}
#contentBox{
  margin-top:25px;
}

Кроме того, это ограничивает меня, чтобы оставаться на его размере. это не дает мне возможности прокручивать вниз. Помогите мне, пожалуйста. благодаря

0
Paolo Duhaylungsod 21 Фев 2016 в 15:35

6 ответов

Лучший ответ

Я вижу, у вас есть <div id="mainContentArea">, в котором
#mainContentArea { margin: 0 auto 0 auto; display: table; height: 100%; position: relative; overflow: hidden; width: 661px; }

Проблема в том, что ваш #blueBox находится внутри подразделения #mainContentArea, в котором для свойства overflow установлено значение hidden. Итак, сколько бы вы ни добавили к #blueBox, оно будет скрыто #mainContentArea

Решение : удалите строку overflow:hidden, она вам не нужна.

1
Qaddura 21 Фев 2016 в 13:04

1) Прежде всего удалите "position: absolute;" из #blueBox добавьте "height: 100%" к следующим селекторам a) #blueBox b) #contentBox.

Найдите образец кода ниже !!

.pageContent {
     font-family: Arial, Helvetica, sans-serif;
     color:#000000;
     font-size:12px;
     margin-left:20px;
     margin-right:20px;
     width:560px;
     height:100%;
    }

#bluebox {
    position: relative;
    vertical-align: middle;
    background-color:#E7EDF8;
    width:600px;
    clear:both;
    height:100%;
   overflow-y: scroll; /*Allow you to scroll inside the blue content*/
 }
0
David Addoteye 21 Фев 2016 в 12:53

Здесь вы вводите #mainContentArea width: 600px;, вы меняете width, тогда вы получите свою спецификацию. потому что #blueBox находится под #mainContentArea. Затем вы можете настроить высоту и ширину #blueBox.

0
Gamsh 21 Фев 2016 в 12:52

Вы определили максимальную доступную ширину родительского элемента:

#mainContentArea{
    width: 600px;
}

Таким образом, у вас нет возможности пойти дальше этого 600 пикселей по ширине. Если вы хотите установить ширину blueBox более 600 пикселей, вам следует увеличить ее в элементе #mainContentArea .

Также было бы намного лучше не определять свойство width для каждого отдельного элемента. Итак, удалите объявление width из этих элементов:

#linkGroup
#blueBox
#header
.contentTitle
.pageContent

В конце, вам не нужно объявлять position: absolute для #blueBox , поэтому удалите его. Точно так же эта часть вашего CSS

html{
  overflow: hidden;
  height: 99%;
}
body{
  height: 99%;
}

С большей вероятностью будет удален, если в нем нет особой необходимости, поскольку это может вызвать проблемы с вашей простой структурой.

#mainContentArea{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  width: 600px;
}

.link,.linkActive{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  background-image:url(tab.gif);
  position:relative; bottom:0px;
}

.link:hover{
  background-image:url(tab2.gif);
}

a{
  text-decoration:none;
}

.link a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
}

#linkGroup{
  margin-right:10px;
  height:40px;
}

#title
{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  float:left;
}

.contentTitle
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#213E74;
  font-size:19px;
  margin-left:15px;
  margin-right:12px;
  margin-bottom:12px;
}

.pageContent
{
  font-family: Arial, Helvetica, sans-serif;
  color:#000000;
  font-size:12px;
  margin-left:20px;
  margin-right:20px;
  height:auto;
}


#blueBox{
  vertical-align: middle;
  background-color:#E7EDF8;
}

#header{
  height:20px;
  background-color:#FFFFFF;
  background-image:url(header.gif);
  background-repeat:no-repeat;
}

#footer{
  height:20px;
  background-color:#FFFFFF;
  background-image:url(footer.gif);
  background-repeat:no-repeat;
  text-align:center;
  padding-right:10px;
  color:#BDCDEC;
}
#footer a{
  font-size:9px;
  color:#BDCDEC;
}

#contentBox
{
  margin-top:25px;
}
<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>

        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>

        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>
0
Pmpr 21 Фев 2016 в 13:10

Я отредактировал ваш css, чтобы он мог быть отзывчивым, отлично работать с откликающимися div. пытаться

#mainContentArea{
	width:100%;
	 
	
	
}

.link,.linkActive
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(tab.gif);
position:relative; bottom:0px;
}

.link:hover
{
background-image:url(tab2.gif);
}

a
{
text-decoration:none;
}

.link a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#linkGroup
{
margin-right:10px;
height:40px;
width:100%;
}

#title
{
width:200px;;
height:40px;
margin-right:10px;
margin-top:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
text-align:left;
float:left;
}

.contentTitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#213E74;
font-size:19px;
margin-left:15px;
margin-right:12px;
margin-bottom:12px;
width:100%;
text-align:center;
}

.pageContent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin-left:20px;
margin-right:20px;
width:90%;
height:auto;
}


#blueBox
{
    position: relative;
	 
    vertical-align: middle;
    background-color:#E7EDF8;
    width:100%;
    clear:both;
    height:auto;
}

#header
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(header.gif);
background-repeat:no-repeat;
}

#footer
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(footer.gif);
background-repeat:no-repeat;
text-align:center;
padding-right:10px;
color:#BDCDEC;
}
#footer a
{
font-size:9px;
color:#BDCDEC;
}

#contentBox
{
margin-top:25px;
}



html, body {
text-align: center;
width:90%;
margin:0 auto;
}
p {text-align: left;}
 <head>
<title>Blue Bliss by Bryant Smith</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="bluebliss.css" />
</head>
<body>

<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>

        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>

        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>
</body>
</html>
0
Omari Victor Omosa 21 Фев 2016 в 12:50

Проблема в том, что вы ограничили ширину своего внутреннего div, просто сохраните ширину внутренних div до 100%, и он будет расширяться. надеюсь, что это сработает

0
Zulfiqar Tariq 21 Фев 2016 в 12:54