div css 高度 100% 无效

Question

我不知道为什么这不起作用，但我希望 div 像文本一样随滚动一起移动。这是 jsfiddle 示例。我还看到有时正文只有浏览器的高度，如果我滚动，正文将不会继续。

<html>
<head>
    <title></title>
</head>
<body>
    <div id=fullheight>
        Lorem Ipsum     Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.
<P> 
Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.
<P>
Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne.
<p>
Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.
<P> 
Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.
<P>
Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne.   
    </div>
</body>
</html>


html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
body {
background: red;
}
#fullheight {
width: 250px;
background: blue; 
}

Answer 1

使用height: inherit; 你有 height:100% 但 100% 是什么？

这就是它不起作用的原因。 JS FIDDLE USING height:inherit;

检查片段

html, body, #fullheight {
    
    height: inherit;
}
body {
  background: red;
}
#fullheight {
    width: 250px;
    background: blue;
      
}

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="fullheight">
           <p> Lorem Ipsum     Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.</p>
<p> 
Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.</p>
<p>
Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne.</p>
<p>
Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.</p>
<P> 
Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.</P>
<P>
Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne. </P> 
        </div>
         
    </body>
</html>

Answer 2

将高度设置为 100% 会将 div 设置为 window 高度的 100%。如果删除高度值，div 将是父级 div.

的完整高度

html, body, #fullheight {
    min-height: 100% !important;
}

已更新 fiddle：http://jsfiddle.net/KfjGU/846/

Answer 3

html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}

你有重复的高度属性！，只需删除 !important 和高度属性。那么您的代码将是：

html, body, #fullheight {
    min-height: 100%;
}

Answer 4

你的 html 应该是这样的。

放置 p 的结束标记

2.put id 在双引号中。

<div id="fullheight">
               <p>

               Lorem Ipsum     Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.</p>
    <P> 
    Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.</P>
    <P>
    Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne.</P>
    <p>
    Appareat eleifend consequat ut per, adipisci praesent pro no, quot nostrum ne cum. Legimus vulputate vix ex, odio aliquam ut has, eu quo debet solet consectetuer. Natum populo feugiat pro at. Tritani nusquam est ei, ut sed vidit lorem quaerendum. His semper euismod adipiscing in, maiorum detracto legendos cu duo, tation commodo mediocrem his ad. Usu ad error numquam tractatos.</p>
    <P> 
    Ne duo epicuri voluptua petentium, enim adipisci ut nec, in sea agam lorem admodum. Ut sed verterem consequuntur, ea tollit mnesarchum mel. Commodo denique an sed, qui ei erant possit. In cum virtute commune eloquentiam, nec libris nominati et, percipit delicata eum an.</P>
    <P>
    Nostro omittantur et eos, has diceret nominavi pertinax at, ei mel indoctum explicari. An quo veniam facete, an sit ignota definiebas. At molestiae conclusionemque eum, eos nostro aliquam id. Ius reque tritani quaestio ne. </P>  
            </div>

和Css应该是这样的。

body {
  background: red;
}
#fullheight {
    width: 250px;
    background: blue; 
    height: 100%;
}

Answer 5

html, body, #fullheight {
min-height:10%;
display: table;
}
body {
background: red;
}   
#fullheight {
width: 250px;
background: blue; 
}



listen , height:100% is not realy true! you can use height:auto or use px em

div css 高度 100% 无效

div css height 100% not working

html

css

height