Как сделать тело и его детей 100% видимой высоты?

ОБА HTML/BODY 100% РЕШЕНИЕКак сделать тело и его детей 100% видимой высоты?

html, body { height : 100% }

Это работает, без сомнения. Оба элемента будут занимать весь экран, идеально.

Почему бы не использовать? В.Х.-вместо этого? Ну, что связано с мобильным Safari, существует большая разница между 100% заниманием видимого пространства и 100vh с учетом высоты представления, что делает его больше, чем панель инструментов, а не желательна в моем случае.

Существует только одна большая проблема с этим подходом. Если содержание внутри тела занимает более 100% видимой высоты, как и в большинстве случаев, оно будет переполняться. Это может быть не большая проблема, кроме того, что она чувствует себя взломанной, однако она разрывает -webkit-липкий, чтобы не стирать элементы дальше, чем контейнер тела.

MIN-ВЫСОТА К СПАСЕНИЯ, НЕ СОВСЕМ

Так на самом деле то, что мы хотим сказать, эй HTML и BODY быть не менее 100%. Это решило бы все наши проблемы, потому что это именно то, что мы хотим. К счастью, есть свойство для этого min-height.

html, body { min-height : 100% }

Если они оба не менее 100% от области просмотра, он должен работать, но это не так.

Предложенное решение

html { 
    height : 100%; 
} 

body { 
    min-height : 100%; 
}

Это делает высота тела высоту окна просмотра, однако все дети элементы не признают это, например:

HTML Источник

<head> 
    <title>Body Height Problem</title> 
</head> 

<body> 
    <div class="fullheight-cover"> 
    Some beautiful image with the CSS background. 
    </div> 

    <section class="content"> 
    Some content in section A. 
    </section> 

    <section class="content"> 
    Some content in section B. 
    </section> 
</body> 

</html>

CSS Источник

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    background: red; 
} 

.fullheight-cover { 
    min-height: 100%; 
    background: green; 
}

(Codepen: http://codepen.io/anon/pen/pbGWBq)

Если вы проверяете элементы, которые вы заметите, что тело теперь будет иметь высоту, которая является удивительным. Однако вы ожидаете, что .fullheight-cover заполнит это пространство, причем его высота будет минимальной на 100%, но это не сработает.

Как я могу сделать это так, чтобы дети тела могли использовать высоту 100%, которая течет естественным образом?

источник

2016-08-14 Mark

-1

Попробуйте

<div style="overflow: hidden;"> 
<div style="background: green; float: left; padding-bottom: 20000px; margin-bottom: -20000px; width: 30%">Column 1st</div> 
<div style="background: red; padding-bottom: 20000px; margin-bottom: -20000px; float: left; width:70%">Column 2nd<br/>Your text text text<br/>Other text text and something other text</div> 
</div>

источник

2016-08-14 08:02:02

Проверьте это.Im добавляют display: flex к body и width: 100% к .content

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    background: red; 
 
    display: flex; 
 
} 
 
.content { 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background: green; 
 
}

<html> 
 
<head> 
 
    <title>Body Height Problem</title> 
 
</head> 
 
<body> 
 
    <div class="content"> 
 
    Some sample content. 
 
    </div> 
 
</body> 
 
</html>

источник

2016-08-14 08:07:21

Это дает содержание 100% высоты, но несколько проблем с этой тактикой. A) Я написал контент как пример, полный код будет содержать больше элементов. если я изменил направление гибкости на столбец, чтобы показать элементы, высота снова разрывается. B) Тело теряет свое статическое преимущество. – Mark

Просто используйте 'display: flex' для' .content' и для 'body' и' flex-direction: column' для '.content'. –

Что вы видите преимущества статического рендеринга? 2016 год - отзывчивый. –

Эй, я могу помочь вам с решением вы можете исправить этот шаблон с помощью CSS в одиночку, его лучше использовать CSS, а не JS.

Это образец шаблона, пожалуйста, пройдите через него.

РЕШЕНИЕ

HTML, есть ..

<html> 
    <link rel="stylesheet" href="style.css"/> 
    <body> 
    <header class="border"><h1>Header</h1></header> 
    <section class="sub-header border"><h2>Sub header</h2></section> 
    <div class="side-menu border"> 
     <div class="menu-head"><h3>Menu heading</h3></div> 
    <div class="menu-items "> 
     <p>Menu items 1</p> 
     <p>Menu items 2</p> 
     <p>Menu items 3</p> 
     <p>Menu items 4</p> 
     </div> 
    </div> 
    <div class="main-content border"> 
    <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula. 
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus. 
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper. 
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula. 
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus. 
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper. 
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p> 
    </div> 
    </body> 
</html>

CSS есть ..

*{ 
    margin: 0; 
    padding: 0; 
} 
html,body{ 
    height: 100%; 
    overflow: auto; 
} 
.border{ 
    border: 1px solid #000; 
} 
header{ 
    text-align: center; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    background: #ea4242; 
} 
.sub-header{ 
    text-align: center; 
    position: fixed; 
    left: 0; 
    top: 39px; 
    width: 100%; 
    background: #d46b6b; 
} 
.side-menu{ 
width: 240px; 
    position: fixed; 
    left: 0; 
    top: 68px; 
    height: 89%; 


} 
.menu-head{ 
    width:100%; 
    text-align: center; 
    padding: 12px 0; 
    background: #96a2ff; 
} 
.menu-items{ 
    height: 100%; 
} 
.menu-items p{ 
    padding: 20px 10px; 
    border-bottom:1px solid #777; 
} 
.main-content{ 
    height: 1900px; 
    width: calc(100% - 252px); 
    margin-left: 240px; 
    margin-top: 66px; 
    background: #fdefa9; 
    padding: 0 0px 0 10px;  
}

Попробуйте это будет подходит вам лучший способ

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html,body{ 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.border{ 
 
    border: 1px solid #000; 
 
} 
 
header{ 
 
    text-align: center; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    background: #ea4242; 
 
} 
 
.sub-header{ 
 
    text-align: center; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 39px; 
 
    width: 100%; 
 
    background: #d46b6b; 
 
} 
 
.side-menu{ 
 
width: 240px; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 68px; 
 
    height: 89%; 
 
    overflow:auto; 
 
overflow:auto; 
 

 
    
 
} 
 
.menu-head{ 
 
    width:100%; 
 
    text-align: center; 
 
    padding: 12px 0; 
 
    background: #96a2ff; 
 
} 
 
.menu-items{ 
 
    height: 100%; 
 
} 
 
.menu-items p{ 
 
    padding: 20px 10px; 
 
    border-bottom:1px solid #777; 
 
} 
 
.main-content{ 
 
    height: 1900px; 
 
    width: calc(100% - 252px); 
 
    margin-left: 240px; 
 
    margin-top: 66px; 
 
    background: #fdefa9; 
 
    padding: 0 0px 0 10px;  
 
}

<header class="border"><h1>Header</h1></header> 
 
    <section class="sub-header border"><h2>Sub header</h2></section> 
 
    <div class="side-menu border"> 
 
     <div class="menu-head"><h3>Menu heading</h3></div> 
 
    <div class="menu-items "> 
 
     <p>Menu items 1</p> 
 
     <p>Menu items 2</p> 
 
     <p>Menu items 3</p> 
 
     <p>Menu items 4</p> 
 
     </div> 
 
    </div> 
 
    <div class="main-content border"> 
 
    <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula. 
 
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus. 
 
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper. 
 
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula. 
 
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus. 
 
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper. 
 
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p> 
 
    </div>

источник

2016-08-15 16:58:27

Как сделать тело и его детей 100% видимой высоты?

ответ

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