使用溢出元素时未考虑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高度属性值

回答

相关问题