div css 高度 100% 不工作答案

【问题标题】：div css height 100% not workingdiv css 高度 100% 不工作
【发布时间】：2017-03-04 22:17:48
【问题描述】：

我不知道为什么这不起作用，但我希望 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; 
}

【问题讨论】：

标签： html css height

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

将高度设置为 100% 会将 div 设置为窗口高度的 100%。如果删除高度值，则该 div 将是父 div 的完整高度。

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

更新小提琴：http://jsfiddle.net/KfjGU/846/

【讨论】：

@OkeTega 我只是把它留在了以前，事后看来我应该做得更好。

【解决方案3】：

您的 html 应该如下所示。

放p的结束标签

2.将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%;
}

【讨论】：

【解决方案4】：

使用height: inherit; 你有 身高：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>

【讨论】：

【解决方案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

【讨论】：