使用溢出元素時未考慮CSS高度屬性值

我在div中使用css來在單個頁面中顯示三個塊。可以隱藏水平滾動並啓用垂直滾動。下面的代碼是爲此目的而編寫的，但爲每個div給出的100px的高度不被瀏覽器考慮。下面是我的代碼：標題1 使用溢出元素時未考慮CSS高度屬性值

<body> 
    <div> 
     <div id="div1" style="float: left; width: 355px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     1111111111111111111 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 

     <div id="div2" style="float: left; width: 605px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     1111111111111111111 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 

     <div id="div3" style="float: left; width: 360px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     <div id="div4"> 
      1111111111111111111 <br> 
      1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
      1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 
     </div> 

     <br style="clear: left;" /> 
    </div> 

</html>

請幫我解決這個問題的高度。

感謝 Jagadesh小號

來源

2014-03-14 Jagadesh

的jsfiddle入門 - http://jsfiddle.net/heyjag/cs3zV/1/ – Jagadesh

您使用height = 100px;。這是不正確的語法。它應該是height: 100px;。

<html> 
    <head> 
    <title> Title1 </title> 
    </head> 

    <body> 
    <div> 
     <div id="div1" style="float: left; width: 355px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     1111111111111111111 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 

     <div id="div2" style="float: left; width: 605px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     1111111111111111111 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 

     <div id="div3" style="float: left; width: 360px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; "> 
     <div id="div4"> 
      1111111111111111111 <br> 
      1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
      1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
     </div> 
     </div> 

     <br style="clear: left;" /> 
    </div> 

</html>

來源

2014-03-14 01:31:26 Bob

見http://jsfiddle.net/cs3zV/2/ – Ron

使用溢出元素時未考慮CSS高度屬性值

回答

相關問題