在标题之后我有一个div,其中包含另外两个,它们彼此相邻。我想在它们之间创建一个边框。我试图使用左div的右边框或右div的左边框,但它们无法正常工作。
正确的div可以有很多内容,所以我必须为它做 overflow:hidden ,所以我可以滚动页面。但是如果我只有很少的内容,div将不会垂直填充整个页面,因此左边框将变小。这里 - > http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html你可以看到我在说什么。
当右边的div垂直增加时,我希望边框移到底部,跟随它的大小。
HTML:
<div id="wrapper">
<div id="leftsidebar">
<form id="logoutForm" action="index.html">
<h1 id="login_title">Logout</h1>
<fieldset id="actions">
<input id="logout" type="submit" value="Log out" />
</fieldset>
</form>
</div>
<div id="main">
<span id="location">Home</span>
<a href="member_news.html" class="normal_link">News</a>
</div>
</div>
CSS:
div#wrapper{
position:absolute;
top:25%;
width:100%;
}
div#leftsidebar{
/*position:absolute;
top:25%;*/
width:19.87%;
height:100%;
min-width:200px;
float:left;
}
div#main{
/*position:absolute;
top:25%;
left:20%;*/
/*width:79.81%;
float: left;*/
font-size:1.2em;
border-left-color:white;
border-left-style:solid;
border-left-width:3px;
overflow:hidden;
padding-bottom:2%;
}
我如何获得我想要的东西?
答案 0 :(得分:1)
给包装器和主div设置正确的高度,你就会得到结果。
div#wrapper{
position:absolute; /*Stayed this whay cause you needed it*/
top:25%;
height: 75%; /**Make the wrapper contain all the needed space*/
width:100%;
}
div#main{
height:96%;
/**Value actually needs be a bit less then 100 due to padding*/
.... /**You're code here*/
}
您可以在以下jsFiddle上查看结果。 http://jsfiddle.net/pY6nF/