正确对齐Div
问题描述:
我需要一些认真的CSS帮助来处理当前的项目。我附上了我希望我的页面看起来像的屏幕截图。我遇到的问题是正确定位div,以及使页面的宽度/高度保持100%。我想在不使用Javascript的情况下做到这一点。这是我的HTML:正确对齐Div
<body>
<div class="wrapper">
<div class="container_24">
<div class="grid_16">
<input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
</div>
</div>
<div class="container_16">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="Body" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
<div class="container_24"></div>
</div>
</body>
这是我的CSS:
.wrapper{
min-height: 100%;
min-width: 100%;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
.container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
/* Set up proportionate scaling */
height: auto;
margin-top:0px;
padding-top:0px;
background-image:url(../images/Content_bkg.gif);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
background-image: url(../images/headerFooter_bkg.gif);
height: 60px;
margin: 0px;
padding: 0px;
border: 1px solid rgb(71, 89, 32);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
position:relative;
width:100%;
}
形象有什么我希望它看起来像(横跨整个浏览器窗口):
实际:
答
html,body {
height: 100%;
}
.container_16 {
min-height: 100%;
}
也许尝试一下。或者做一个小提琴,这样我们可以混淆你的代码。
编辑
http://jsfiddle.net/LMFL5/4/(小提琴不会,除非你有两个监视器和跨度横跨两者为960太小,做到公正,调节包装宽度喜欢500看到它在这样你也可以很容易地为你的包装设置断点并制作一个半响应网站,我不再这样做,我使用柔性宽度为960的网格。我做你在说的很多东西。
HTML
<body>
<div class="container_24">
<div class="wrapper">
<div class="grid_16">
<input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
</div>
</div>
</div>
<div class="container_16">
<div class="wrapper">
<form id="form1" runat="server">
Adding some content
</form>
</div>
</div>
<div class="container_24 footer">
<div class="wrapper">Footer</div>
</div>
</body>
CSS
html, body {
height:100%;
margin: 0;
}
.wrapper{
width: 960px;
margin: 0 auto;
}
.grid_16 {
text-align: center;
}
.container_16 {
width: 100%;
height: 100%;
}
.container_16 .wrapper {
background-image:url(../images/Content_bkg.gif);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
height: 100%;
}
.container_24 {
background-image: url(../images/headerFooter_bkg.gif);
background-color: green;
height: 60px;
margin: 0px;
padding: 0px;
border: 1px solid rgb(71, 89, 32);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
position:relative;
width:100%;
}
.container_24.footer {
bottom: 0;
position: fixed;
z-index: 3;
}
什么,我做你的宽度最关键的是做一个普通960的包装,包括我在每一个DIV。墙壁上的所有内容都位于960空间中,但您可以将div全屏显示。这个站点:http://960.gs/有一个CSS生成器,它可以完成你想要做的事情,你的代码大部分看起来像是来自这个相同的类模式。这里可以生成您所需的列数:http://grids.heroku.com/
基本上,如果你想要一个全屏宽div,只需将其中一个.content
div包装好,你就可以走了。
答
@Yecats可能是这一个帮助你
.wrapper
{
height: 100%;
min-width: 100%;
/* Set up proportionate scaling */
width: 100%;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
我不知道的显示全高,除非你想一个好办法底部绿色的酒吧永远在那里。当你获得一些内容时,底部的绿色条应该向下移动。 – Leeish 2013-03-01 23:19:50
.content-16 - 它是否有任何内容?将其设置为高度:100%不能保证延伸。另外,你是否设置你的HTML和身体宽度:100%;高度:100%;? – 2013-03-01 23:19:51
如果你想让你的内容-16能够变大,我会设置'min-height'而不是'height'。如果它是父元素,它将是100%的高度。 – Leeish 2013-03-01 23:21:11