css将空的div撑开,如何使用css将空的浮动div伸展到可用的全高度？

我能想出是对.left-sidebar元素上使用position: absolute最好的：

.page {

position: relative; /* causes the left-sidebar to position relative to this element */

}

.left-sidebar {

position: absolute;

top: 0;

bottom: 0; /* this line, and the one above, confer full-height */

left: 0;

width: 30%;

background-color: #f90; /* adjust to taste, just to see where the element was rendered */

}

.right-content {

background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */

margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */

}

响应编辑以下评论：

有一个头部和浮动的div两侧的一些空间，所以我不知道实际的顶部/左/底部职位使用。另外，如果正确的内容框架伸展较长，则左侧边框框架不会随之伸展(将高度：500px添加到小提琴的右侧内容框架中)。

不幸的是，我可以看到的唯一选择就是到.right-content元素中的.left-sidebar元素移动，然后将下面的作品。不过，这可能不适用于您的使用案例。

.left-sidebar {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 30%;

background-color: #f90;

}

.right-content {

position: relative;

background-color: #f00;

margin: 0;

padding: 0 0 0 35%;

}

css将空的div撑开,如何使用css将空的浮动div伸展到可用的全高度？相关推荐

避免表格table被撑开变形的CSS代码实例
如何避免表格因为图片尺寸或者过长的英文字符而变形撑开,在CSS加入以下代码就可以防止,同时英文单词也会按单词断行,不是按字母这个.我想说的是这个在CSS2.0是不支持的,但是能解决一些实际问题.页面 ...
一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘
什么是新拟态新拟态的英文名称是"Neumorphism",也有人称为"Soft UI". 简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI ...
Html设置表格撑开,CSS教程:表格不被撑开的解决办法
CSS教程:表格不被撑开的解决办法 2009-10-21 eNet&Ciweek 今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解 ...
html中怎么让div撑开,html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）...
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素f ...
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...

css将空的div撑开,如何使用css将空的浮动div伸展到可用的全高度？

css将空的div撑开,如何使用css将空的浮动div伸展到可用的全高度？相关推荐

最新文章

热门文章