相关疑难解决方法(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%.到目前为止,将整个事物包装在表中是唯一有效的方法.
推荐指数
解决办法
查看次数
html元素如何仅使用css填充剩余屏幕高度的100%？
我有一个标题元素和一个内容元素:
#header
#content
我希望标题具有固定的高度,并且内容可以填满屏幕上可用的所有剩余高度overflow-y: scroll;.
这可能没有Javascript？
推荐指数
解决办法
查看次数
如何让我的flexbox布局占用100%的垂直空间？
如何告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间？
我有一个3排flexbox布局.前两行是固定高度,但第三行是动态的,我希望它增长到浏览器的整个高度.
我在第3行中有另一个flexbox,它创建了一组列.要正确调整这些列中的元素,我需要它们来理解浏览器的整个高度 - 例如背景颜色和底部的项目对齐.主要布局最终将类似于:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div …推荐指数
解决办法
查看次数
填充剩余的垂直空间 - 仅限CSS
我需要填写剩余的垂直空间的#wrapper下#first用#secondDIV.
我需要一个唯一的CSS解决方案.
HTML:
#wrapper {
width: 300px;
height: 100%;
}
#first {
width: 300px;
height: 200px;
background-color: #F5DEB3;
}
#second {
width: 300px;
height: 100%;
background-color: #9ACD32;
}CSS:
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>推荐指数
解决办法
查看次数
使嵌套div伸展到剩余容器div高度的100%
我有一个包含div,我想要至少延伸到窗口的整个高度.如果容器div中有很多内容,我希望它延伸到窗口的高度以上.这有效.
在容器div我有一个图像.在图像之后/之下,我有第二个div.我希望这个嵌套的div垂直拉伸以填充容器div的剩余空间.这不起作用.
我试图在这张图片中说明问题.我希望div来在图文并茂的方式伸展左右图像的侧面,而不是因为它看起来在右侧的右侧图像的边.
以下是我的代码.正如你所看到的,在这段代码中,我甚至没有尝试使图像下的div垂直拉伸,因为没有任何效果."高度:100%"不起作用,因为默认情况下我将"100%"定义为窗口的高度,以使容器div至少伸展到窗口的高度.
样式:
* {
margin: 0; padding: 0;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
body, html {
height: 100%;
}
.container {
display: block;
overflow: auto;
min-height: 100%;
height: 100%;
height: auto;
}
.bottom {
width: 100%;
}
HTML:
<div class="container">
<img src="image.jpg" width="100%">
<div class="bottom">
LOREM IPSUM
</div>
</div>
推荐指数
解决办法
查看次数
Flexbox主体和主要最小高度
https://jsfiddle.net/vz7cLmxy/
我试图让身体扩张,但最小高度不起作用.我已经阅读了其他相关主题,但无法理解它.
CSS和HTML
body,
html {
padding: 0;
margin: 0;
min-height: 100%;
}
body {
display: flex;
background: #eee;
flex-direction: column;
}
.menu {
background: red;
color: #fff;
padding: 10px;
}
.wrap {
display: flex;
}
.sidebar {
background: #ddd;
width: 300px;
}
.main {
background: #ccc;
flex: 1;
}
.footer {
background: #000;
color: #fff;
padding: 10px;
}<div class="menu">Menu</div>
<div class="wrap">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>
<div class="footer">Footer</div>预期的结果是,如果它小于100%,则主要是拉伸以填充高度.
推荐指数
解决办法
查看次数
如何在不垂直滚动标题的情况下使浏览器的 DIV 高度为 100%
左右面板的高度均为 100%，但由于Header div 占用 X 空间，因此我想去掉窗口中的一些垂直滚动。
如何删除垂直滚动？
JSFiddle：http : //jsfiddle.net/G7unG/1/
CSS 和 HTML
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
}
.leftpanel, .rightpanel{
height: 100%;
}
.leftpanel{
float: left;
width: 70%;
background: #CCC;
}
.rightpanel{
float: left;
width: 30%;
background: #666;
}<div class="header">Header</div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
<div class="clearfix"></div>推荐指数
解决办法
查看次数
CSS 拉伸内容容器高度，如果为空则溢出，如果太大
我所拥有的是一个简单的结构，container后跟两个子元素content和footer。
footer具有固定的高度并content应填充剩余的空白空间。这很容易实现，display:table;但由于某种原因，我无法弄清楚content如果元素内容超出网站窗口高度，如何使元素溢出起作用？
这是一个JSFiddle，如果您设置content_child高度来表示10px您可以看到content元素很好地填充空间，但是当content_child更大的content元素不应该像现在这样扩展时，我在这里缺少什么？
如果可能的话，我宁愿不使用 JavaScript 来解决这个问题。
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: hidden;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}<div class="container"> …推荐指数
解决办法
查看次数
使第二行的弹性物品占据容器的剩余高度
我正在尝试创建一个顶部带有标题的布局,下面是侧边栏和主要内容.
我想让侧边栏和内容视图接管标题留下的垂直空间.问题是标题可以动态重新调整大小,所以我无法执行calc().我的解决方案是使用flexbox方案.
我将视口水平分为两部分.一个是标题,一个是侧边栏和主要内容的包装.
侧边栏向左浮动并给出宽度的一定百分比,内容向右浮动并给出其余部分.
问题是我试图让侧边栏始终是包装器的100%高度.
我尝试过height: 100%,min-height: 100%但这些都行不通.
我不希望绝对定位它,因为如果包装器溢出主要内容,侧边栏将不会相应地扩展.
这是我的笔:http://codepen.io/markt5000/pen/JXNXpW
如您所见,橙色是标题,红色空间是侧边栏和内容的包装.
这是布局
<div class="header">
</div>
<div class="row">
<div id="sidebar">
</div>
<div id="main-content">
</div>
</div>
推荐指数
解决办法
查看次数
3行,100%高度布局,带有flexbox
我想知道:是否可以使用flexbox构建3行布局,100%高度？
<header> The header content goes here. </header>
<div class="content"> The main content goes here. </div>
<footer> The footer content goes here. </footer>
固定高度的页眉和页脚,同时满足液体部分.
我的意思是,这样的事情,但没有绝对的定位:
* {
margin: 0;
}
header {
position: absolute;
width: 100%;
height: 64px;
top: 0;
background: red;
}
footer {
position: absolute;
width: 100%;
height: 64px;
bottom: 0;
background: green;
}
.content {
position: absolute;
width: 100%;
top: 64px;
bottom: 64px;
background: blue;
}<header>The header content goes here.</header>
<div class="content">The main content goes here.</div> …推荐指数
解决办法
查看次数