2017-03-04 22 views
0

Ich weiß nicht, warum das nicht funktioniert, aber ich möchte das div mit der Rolle gehen wie der Text tut. Hier ist das Beispiel für das Beispiel. Ich habe auch gesehen, dass der Körper manchmal nur die Höhe des Browsers hat und wenn ich scrollte, wird der Körper nicht weitermachen.div css height 100% funktioniert nicht

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

Antwort

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

Sie Höhe Attribut wiederholt haben !, entfernen Sie einfach wichtig und Höhe Attribut!. dann wird Ihr Code sein:

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

Verwendung height: inherit; Sie haben height: 100%, sondern 100% von dem, was?

Deshalb funktioniert es nicht. JS FIDDLE USING height:inherit;

Check SNIPPET

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> \t 
 
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> \t 
 
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>

0

die Höhe auf 100% setzt den div bis 100% der Höhe des Fensters. Wenn Sie den Wert für die Höhe entfernen, entspricht das div der vollen Höhe des übergeordneten div.

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

Aktualisiert Geige: http://jsfiddle.net/KfjGU/846/

+2

mit '! Ist important' nicht immer ein guter Idee –

+0

@OkeTega verließ ich nur, dass im Nachhinein in aus der Zeit vor, sollte ich habe es ein wenig besser. –

0

Ihre HTML sollte wie folgt aussehen.

  1. put Schließschild von p

2.Put id in Seite Doppel Quot.

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

und Css sollte so aussehen.

body { 
    background: red; 
} 
#fullheight { 
    width: 250px; 
    background: blue; 
    height: 100%; 
} 
0
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