Контейнер / Упаковщик Div не содержит весь контент? - PullRequest
Новая
       233

Контейнер / Упаковщик Div не содержит весь контент?

7 голосов
/ 17 мая 2010

Контейнер / Оболочка Div не содержит всего содержимого (то есть всех дочерних элементов Div). Я пробовал переполнение: скрыто, но все еще не работает Может кто-нибудь, пожалуйста, скажите мне, почему это происходит и каковы возможные решения.

Заранее спасибо; -)

почему-то не отображается весь код ?? 

 <html>
     <head>
         <style type="text/css">
         #wrapper {
             margin:0 auto;
             width: 600px;
             background: yellow;    
         }
         </style>
     </head>

     <body>
         <div id="wrapper">
             <div="header">
                 <h1>my beautiful site</h1>
             </div>

             <div id="navigation">
                 <ul>
                     <li><a href="#">Home </li>
                     <li><a href="#">About</li>
                     <li><a href="#">Services</li>
                     <li><a href="#">Contact us </li>
                 </ul>
             </div>

             <div id="content">
                 <h2> subheading </h2>
                 <p>  long paragraph </p>
             </div>

             <div id="footer">
                  copyright 123
             </div>
         </div> 
     </body>
 </html>

Ответы [ 7 ]

28 голосов
/ 17 мая 2010

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

Кристалл, должно быть, был пыльным ... Однако код, который вы разместили, недействителен - у вас есть содержимое внутри тега head и div вне тега html. Так выглядит ваша страница на самом деле, или это просто ошибка при вставке кода в ваш вопрос? Попробуйте очистить структуру кода и посмотрите, поможет ли это.

РЕДАКТИРОВАТЬ: Нашел проблему - это опечатка. У вас есть <div="header"> - это должно быть <div id="header"> (обратите внимание на отсутствующий идентификатор)

4 голосов
/ 17 мая 2010

Отличный инструмент: http://validator.w3.org/ - сообщит, есть ли ошибки разметки и в каких строках.

4 голосов
/ 17 мая 2010

Попробуйте передать clear:both родительскому элементу div или поставить div в конце: 

<style type="text/css">
 .clear{clear:both;}
</style>

Возможность первая: 

<div id="parent">
  <div id="child1">Some Content</div>
  <div id="child2">Some Content</div>
  <div id="child3">Some Content</div>

  <div class="clear"></div>
</div>

Возможность два: 

<div id="parent" class="clear">
  <div id="child1">Some Content</div>
  <div id="child2">Some Content</div>
  <div id="child3">Some Content</div>
</div>
2 голосов
/ 28 октября 2015

Вы можете добавить этот CSS к родительскому div:

.parent-div{overflow:auto;clear:both;}

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

1 голос
/ 17 мая 2010 
<h2> subheading<h2>

Вы скучаете по /

0 голосов
/ 05 мая 2019

По умолчанию плавающие элементы не будут включены в div.

Попробуйте переполнение: авто в родительском div. Это заставит родительский div также содержать плавающие элементы.

0 голосов
/ 17 мая 2010

В вашем элементе HEAD есть DIV.

...