Содержимое отображается за пределами высоты 100%

Может кто-нибудь объяснить, почему, несмотря на то, что высота для моего основного контента и моего основного содержимого установлена на 100%, почему дочерние элементы в фиксированной ширине основного содержимого существуют за пределами его высота? Не следует устанавливать высоту: 100% заставляют ее расти относительно предметов, находящихся внутри?Содержимое отображается за пределами высоты 100%

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
p 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 16px; 
 
    line-height: 19px; 
 
    color: #1e4164; 
 
    margin: 10px 10px; 
 
} 
 

 
.content-section-heading 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    color: #5c5c5c; 
 
    margin: 10px 10px; 
 
    font-weight: 600; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 36px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    line-height: 122px; 
 
    color: #1e4164; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
    margin-bottom: 70px; 
 
} 
 

 
header 
 
{ 
 
    height: 127px; 
 
    width: 100%; 
 
    background-color: #569ABD; 
 
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px; 
 
    position: relative; 
 
    z-index: 2; 
 
    
 
} 
 

 
#header-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    margin: 0 auto; 
 
} 
 

 
#header-fixedWidth img 
 
{ 
 
    margin-top: 3px; 
 
} 
 

 
#banner 
 
{ 
 
    width: 100%; 
 
    height: 772px; 
 
    display: block; 
 
} 
 

 
#main-content 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
    
 
} 
 

 
#mainContent-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.content 
 
{ 
 
    height:340px; 
 
    width: 220px; 
 
    background-color: white; 
 
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px; 
 
    float: left; 
 
    margin: 0px 0px 40px 30px; 
 
} 
 

 
.content #tempContentImage 
 
{ 
 
    height: 180px; 
 
    width: 222px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>OECTA Template</title> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" /> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <div id="header-fixedWidth"> 
 
       <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" /> 
 
      </div> 
 
     </header> 
 
     <div id="banner"> 
 
      <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" /> 
 
     </div> 
 
     <div id="main-content"> 
 
      <div id="mainContent-fixedWidth"> 
 
       <h1>Intranet</h1> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
       </div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2017-01-10 Theodore Steiner

Нет, 'height: 100%' означает относительно контейнера, а не содержимого. –

это то, что вы хотите? Есть разные хитрые вещи в здесь, если вы не знакомы с CSS:

высота в% работает только хорошо, если цепь иерархии также определяются в%, как правило, установив для параметра «HTML» и «тела» на высоту 100% вещь, как здесь, иногда бывает сложнее, и вам понадобятся обертки или JS
плавающие элементы вид из потока содержимого в терминах высоты, исправьте меня, если я ошибаюсь, они «остаются в тексте» строка ", в которой они находятся. Чтобы заставить контейнер адаптироваться, необходимо выполнить« clearfix ». Он состоит в добавлении div с классом, как я сделал в самом конце списка ваших плавающих элементов. Этот класс clearfix, возможно, устарел, существует множество разных версий в зависимости от того, насколько вы хотите назад поддерживать.
'height: 100%' не подходит для контента, но min-height делает. Плохая новость заключается в том, что поддержка назад не очень хороша. Для того, чтобы иметь идеальную поддержку для этого, возможно, придется использовать JS (установив высоту в зависимости от высоты окна, когда оно меньше, и пусть адаптироваться к содержимому, когда больше)

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body 
 
{ 
 
    height: 100%; 
 
} 
 

 
.clear{ 
 
    clear: both; 
 
    height: 0; overflow: hidden; /* Precaution pour IE 7 */ 
 
} 
 

 
p 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 16px; 
 
    line-height: 19px; 
 
    color: #1e4164; 
 
    margin: 10px 10px; 
 
} 
 

 
.content-section-heading 
 
{ 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    color: #5c5c5c; 
 
    margin: 10px 10px; 
 
    font-weight: 600; 
 
} 
 

 
h1 
 
{ 
 
    font-size: 36px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    line-height: 122px; 
 
    color: #1e4164; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
    margin-bottom: 70px; 
 
} 
 

 
header 
 
{ 
 
    height: 127px; 
 
    width: 100%; 
 
    background-color: #569ABD; 
 
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px; 
 
    position: relative; 
 
    z-index: 2; 
 
    
 
} 
 

 
#header-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    margin: 0 auto; 
 
} 
 

 
#header-fixedWidth img 
 
{ 
 
    margin-top: 3px; 
 
} 
 

 
#banner 
 
{ 
 
    width: 100%; 
 
    height: 772px; 
 
    display: block; 
 
} 
 

 
#main-content 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    border: 1px solid black; 
 
    
 
} 
 

 
#mainContent-fixedWidth 
 
{ 
 
    width: 1253px; 
 
    min-height: 100%; 
 
    margin: 0 auto; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.content 
 
{ 
 
    height:340px; 
 
    width: 220px; 
 
    background-color: white; 
 
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px; 
 
    float: left; 
 
    margin: 0px 0px 40px 30px; 
 
} 
 

 
.content #tempContentImage 
 
{ 
 
    height: 180px; 
 
    width: 222px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>OECTA Template</title> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" /> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <div id="header-fixedWidth"> 
 
       <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" /> 
 
      </div> 
 
     </header> 
 
     <div id="banner"> 
 
      <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" /> 
 
     </div> 
 
     <div id="main-content"> 
 
      <div id="mainContent-fixedWidth"> 
 
       <h1>Intranet</h1> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
       </div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="content"> 
 
        <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" /> 
 
        <p class="content-section-heading">Section Heading</p> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p> 
 
</div> 
 
       <div class="clear"></div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2017-01-10 19:26:55 Kaddath

Это потому, что ваши «содержание» пункты все плавающие, так что появляется в браузере, что не любое содержание в контейнере «MainContent-моноширинный».

Добавьте правило CSS overflow: auto к элементу mainContent-fixedWidth и это должно решить его.

источник

2017-01-10 19:14:25 natecornell

Содержимое отображается за пределами высоты 100%

ответ

Смежные вопросы