相关疑难解决方法(0)
使div填充剩余屏幕空间的高度
我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.
该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.
我有标题div和内容div.目前我正在使用表格进行布局,如下所示:
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>页面的整个高度都已填满,无需滚动.
对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.
有没有办法在不使用的情况下达到相同的效果table？
更新:
内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.
更新2:
例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.
推荐指数
解决办法
查看次数
Div宽度100%减去固定的像素数量
如何在不使用表或JavaScript的情况下实现以下结构？白色边框代表div的边缘,与问题无关.
中间区域的大小将会变化,但它将具有精确的像素值,整个结构应根据这些值进行缩放.为了简化它,我需要一种方法将"100% - n px"宽度设置为顶部中间和底部中间div.
我很欣赏一个干净的跨浏览器解决方案,但万一不可能,CSS黑客会这样做.
这是奖金.我一直在努力的另一个结构,并最终使用表或JavaScript.它略有不同,但引入了新的问题.我一直主要在基于jQuery的窗口系统中使用它,但我想保持布局不受脚本限制,只能控制一个元素(中间元素)的大小.
推荐指数
解决办法
查看次数
即使没有内容,如何强制DIV块扩展到页面底部？
在下面显示的标记中,我试图让内容div一直延伸到页面的底部,但只有在显示内容时它才会拉伸.我想这样做的原因是,即使没有任何内容要显示,垂直边框仍会显示在页面下方.
这是我的HTML:
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
我的CSS:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100% …推荐指数
解决办法
查看次数
如何创建div来填充页眉和页脚div之间的所有空格
我正在努力从使用表格进行布局,再到使用div(是的,是的辩论).我有3个div,标题,内容和页脚.页眉和页脚各50px.如何让页脚div保持在页面底部,内容div填充两者之间的空间？我不想硬编码内容div高度,因为屏幕分辨率可能会改变.
推荐指数
解决办法
查看次数
如何将div缩放到另一个元素内的100%高度和宽度
如何将div缩放到另一个元素内的100%高度和宽度？在我的情况下,周围的td.由于我是一个插件,我无法控制页面上的其他HTML.这是我的HTML:
<body style="height:100%;">
<table width="600px" height="400px" border="1">
<tr>
<td style="background-color:silver;">Cell 1</td>
<td style="background-color:silver;">
<div style="height:100%; background-color:yellow;">
<div style="min-height:100%; height:100%; background-color:red;">
Cell 2
</div>
</div>
</td>
</tr>
</table>
</body>
因此,Cell 2 div应该最大化.有没有跨浏览器的方式来做到这一点？为什么这么复杂？
推荐指数
解决办法
查看次数