填充div的空间 [英] Fill the space of a div
本文介绍了填充div的空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个元素来填充父div的剩余空间。我已经设法做到这一点,你可以看到它在这里链接删除,但填充div(右)坐在左侧的div下面。我基本上希望右侧的div从左侧div完成。
I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
希望这是有意义的。
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
推荐答案
#right
,只需删除
width:100%
,并添加 overflow:hidden
。
请参阅: http://jsfiddle.net/hJzJf/ - (我假设您的身高
只是用于测试目的)
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your height
s are just for testing purposes)
为什么会这样?
请参阅: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
这篇关于填充div的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文