div css height 100%不工作

时间:2017-03-04 11:37:57

标签: html css height

我不知道为什么这不起作用,但我希望div像文本那样使用滚动。这是jsfiddle的例子。我也看到有时身体只有浏览器的高度,如果我滚动,身体将不会继续。

http://jsfiddle.net/KfjGU/844/

<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; 
}

5 个答案:

答案 0 :(得分:0)

使用height: inherit; 你有身高:100%但100%是什么?

这就是它无法正常工作的原因。 JS FIDDLE USING height:inherit;

检查SNIPPET

&#13;
&#13;
html, body, #fullheight {
    
    height: inherit;
}
body {
  background: red;
}
#fullheight {
    width: 250px;
    background: blue;
      
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

你有重复的高度属性!,只需删除!important和height属性。 然后你的代码将是:

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

答案 3 :(得分:0)

你的HTML应该是这样的。

  1. 把p
  2. 的结束标记

    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 :(得分:0)

<widget android-packageName="com.myapp" id="com.myapp" ios-CFBundleIdentifier="com.myapp"  version="1.2.38" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">