无法将div扩展到页面底部。包括jsFiddle

无法将左右div展开到页面底部，不多不少。无法将div扩展到页面底部。包括jsFiddle

感谢，戴尔

2011-12-21 Dale

这是你的JS解决方案，先生

//Can place js in <head> tag 
$(document).ready(function(){ 
    var remHeight = $('html').height() - $('#top').height(); 
    $('#left').css('height', remHeight); 
    $('#right').css('height', remHeight); 
});

CSS：

body, html 
{ 
    height: 100%; 
} 
.top { 
    background: red; 
} 
.left { 
    width: 25%; 
    background: grey; 
    float: left; 
} 
.right { 
    width: 25%; 
    background: blue; 
    float: left; 
}

html：

<html> 
<body> 
    <div id="top" class="top"> 
     <div id="msg">hello</div> 
    </div> 
    <div id="left" class="left"> 
     left 
    </div> 
    <div id="right" class="right"> 
     right 
    </div> 
</body> 
</html>

http://jsfiddle.net/zTEhB/

来源

2011-12-21 21:36:39

完美！谢谢。假设我需要重新计算，如果窗口被加载后调整大小？ – Dale 2011-12-21 22:19:46

@Dale Np。是的，每当页面内容更新时，您可能必须运行此操作。 – 2011-12-21 22:22:41

检查：http://jsfiddle.net/5gqNn/

你需要指定的根元素的高度。

参考： https://developer.mozilla.org/en/CSS/height

的计算相对于所述包含块的高度。如果明确指定了包含块的高度不是，则该值计算为自动。根元素（例如）上的百分比高度相对于视口。

来源

2011-12-21 20:03:28

谢谢。你把我引向我最初的问题。原来的问题是，左侧和右侧的div现在超出了页面。我怎么能防止这种情况发生，不知道顶部div的高度？我需要使用JavaScript吗？ – Dale 2011-12-21 20:08:04

@Dale是否有助于向左右div添加“overflow-y：hidden;”（或“overflow：hidden;'）？ – 2011-12-21 20:18:50

http://jsfiddle.net/dNYkz/，用碎纸机溢出更新：隐藏使解决方案完成。好一个。 – 2011-12-21 20:21:20

你不得不说，身体和HTML标签也是这样的100％：

html, body{ 
    height:100%; 
    position: relative;} 
.top { 
    background: red; 
} 
.left { 
    position: relative; 
    width: 25%; 
    height: 100%; 
    background: grey; 
    float: left; 
    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 

    min-height:100%; 
} 
.right { 
    position: relative; 
    width: 25%; 
    height: 100%; 
    background: blue; 
    float: left; 

}

来源

2011-12-21 20:12:31 Spikey21

谢谢。左侧和右侧的div现在超出了页面，这实际上是我原来的问题。我怎样才能防止这种情况发生，不知道顶部div的高度？我需要使用JavaScript吗？如果是这样，那就是我需要听到的。 – Dale 2011-12-21 20:17:37

如果它们超出了其他内容，则必须添加具有更高值的z-index。如果你想让左边和右边的div始终位于最上面，你可以给它们：z-index：9999; – Spikey21 2011-12-21 20:21:09

为什么要添加一个z-index帮助？ – 2011-12-21 20:23:21

无法将div扩展到页面底部。包括jsFiddle

回答

相关问题