2017-03-04 293 views
0

我不知道爲什麼這不起作用,但我希望div像滾動文字一樣滾動。這裏是jsfiddle的例子。我也看到,有時身體只會有瀏覽器的高度,如果我滾動,身體不會繼續。div CSS高度100%不工作

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

回答

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

你有反覆height屬性!只是刪除重要和高度的屬性! 那麼你的代碼將是:

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

使用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> \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

設置高度爲100%設置div來你的窗口的高度的100%。如果刪除高度值,則div將是父div的完整高度。

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

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

+2

使用'!important'並不總是一個好主意 –

+0

@OkeTega我剛剛離開,在從之前,在事後看來,我應該使人們更好一點。 –

0

你的HTML應該是這樣的。 P的

  1. 放關閉標籤在側

2.put ID雙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> 

和Css應該看起來像這樣。

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