上一篇: css – 根据浏览器调整大小调整谷... 下一篇:css – 相对于父元素的固定位置

css – Div占用整个剩余宽度

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – Div占用整个剩余宽度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

参见英文答案 > CSS: Setting width/height as Percentage minus pixels11个
我有一个父div和2个div.第一个儿童div是50px宽和100％高度.第二个孩子的div是100％的高度,我要采取宽度的其余部分(100％ – 50pX)我该怎么做？

这是我创造的小提琴：http://jsfiddle.net/muGty/
基本上我想要蓝色div(右)完全占据灰色容器的其余部分.

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

解决方法

你的意思是 this吗？

<div id="left">
</div>
<div id="right">
</div>

CSS

html,body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    BACkground: #f00;
    height: 100%;
}
#right {
    margin-left: 200px;
    BACkground: #0f0;
    height: 100%;
}

更新：

你也可以在CSS3中使用calc()属性,这样可以简化这个过程

html,body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    BACkground: #f00;
    height: 100%;
}

#right {
    float: left;
    BACkground: #0f0;
    height: 100%;
    width: calc(100% - 200pX); /* Negate the fixed width element value from 100% */
}

Demo 2