Как сделать центрированный контейнер Div, который может растягиваться вертикально на основе элементов внутри? - PullRequest
Новая
       3

Как сделать центрированный контейнер Div, который может растягиваться вертикально на основе элементов внутри?

2 голосов
/ 30 ноября 2011

Я новичок в этом, и я пытаюсь создать простую схему div.Я хотел бы иметь 3 контейнера div: заголовок, контент, нижний колонтитул.Div содержимого Я не хочу фиксировать высоту, я хочу, чтобы он растягивался в зависимости от того, что внутри него.Также я не знаю javascript, поэтому я хочу сделать это только с HTML / CSS.

Я искал ответы на этом сайте, но, похоже, они не работают.Вот HTML: 

<body>
    <div id="header" style="background:beige;">
        <div id="logo" style="background:gray;">
          put logo here 
        </div>
        <div id="navigation" style="background:grey">
          About Us, Contact Us, Etc....
        </div>
    <div id="content" style="background:beige;">
        <div id="bigbox" style="background:black; color:white;">
          big box would have some slide show here
        </div>
        <div class="smallbox" id="smallboxleft" style="background:green;">
          smallboxleft
        </div>
        <div class="smallbox" id="smallboxmiddle" style="background:green;">
          smallboxmiddle
        </div>
        <div class="smallbox" id="smallboxright" style="background:green;">
          smallboxright
        </div>
    </div>    


        <div id="footer" style="background:navy; color:white;">
          This is the footer
        </div>

Вот CSS: 

  #header{margin:0 auto; height:100px; width:960px; position:relative; }

  #logo{height:100px; width:200px;}

  #navigation{height:50px; width:400px; position:absolute; left:560px; top:50px;}

  #content{margin:0 auto; width:960px; height:100%; position:relative; top:25px;}

  #bigbox{position:absolute; height:300px; width:860px; position:absolute; left:50px; top:125px;}

  .smallbox{position:absolute; height:150px; width:300px; top:450px;}
  #smallboxmiddle{left:320px;}
  #smallboxright{left:640px; }

  #footer{position:absolute; height:100px; width:960px; top:625px;}

Ответы [ 3 ]

2 голосов
/ 20 декабря 2011

Друг (мрлостман) дал мне ответ:

не указывайте высоту и сделать #content {overflow: hidden}

когда у вас всплывают элементы, они перестают толкать свои контейнеры вниз. возможно, вы почувствовали необходимость указать высоту из-за этого (#content всегда останавливается на короткое время).

переполнение: скрытый - это общепринятый способ

также создает пустой div непосредственно перед концом контейнера с помощью {clear: both; > Поплавок: нет; } сделает свое дело; но этот способ не является предпочтительным

Итак, для #content я просто изменил на: height: auto; переполнение: скрытый;

2 голосов
/ 30 ноября 2011

Я обычно использую display: inline-block, когда хочу, чтобы элемент «сжал» до его содержимого.

inline-block заставляет элемент генерировать блок-блок, который выложен, как если бы он был встроенным блоком.

0 голосов
/ 30 ноября 2011

Просто установите ширину вашего контента div на авто. ширина: авто; и чтобы обойти другие проблемы с этим, добавьте «clearfix» как класс к вашему контенту div и добавьте это внутри вашего css .. 

 .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

И каждый раз, когда вы хотите применить ту же идею к вашему div, просто добавьте к нему класс clearfix.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...