Question

这个问题非常自我解释。所有这些div元素都是100％的高度我需要左边的div来弯曲，但是没有设置为溢出：隐藏所以我可以使它的子元素也具有弹性。在左侧div中是一个Image滑块，它是响应式的，我正在尝试使其响应。请有人帮我解决这个问题，请提前致谢。

<div id="parent">
    <div id="left">
         Liquid layout
    </div>
    <div id="right">
         Fixed width 450px
    </div>
</div>

Answer 1

如果div元素窗口高度的100％，那么您的HTML + CSS标记将缩减为：

<div id="left">Liquid layout</div>
<div id="right">Fixed width 450px</div>

html   { height: 100%; }
body   { height: 100%; margin: 0; padding: 0; }
#left  { position: absolute; top: 0; bottom: 0; left: 0; right: 450px; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 450px; }

Demo here

如果div元素是相等高度那么这里是一个“旧学校”方法，（i）保留源顺序（ii）使用浮动（iii）生成相等高度的虚拟列（iv）需要一个清除div

<div id="parent">
    <div id="left">Liquid layout</div>
    <div id="right">Fixed width 450px</div>
    <div class="clear"></div>
</div>

#parent { border-right: 450px solid orange /* right bg */; background-color: yellow /* left bg */; }
#left   { float: left;  width: 100%; }
#right  { float: right; width: 450px; margin-right: -450px; }
.clear  { clear: both; }

Demo here

Answer 2

将table-cell用于您的目的：）

在Hashem Qolami回答之后编辑，因为您已在css3类别中标记了问题，让我清楚{IE}及以后版本display:table支持....如果你不想使用clear divs，那就很有用了。

fiddle here

 html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#parent {
    display:table;
    width:100%;
    height:100%;
    word-break:break-all;
}
#left {
    display:table-cell;
    border:1px solid red;
}
#right {
    width:450px;
    display:table-cell;
    border:1px solid green;
}

Answer 3

您可以通过将float属性设置为一个div并将margin设置为另一个来实现此布局：

<强> HTML：

<div id="parent">
    <div id="right">
         Fixed width 450px
    </div>
    <div id="left">
         Liquid layout
    </div>
</div>

<强> CSS：

#right {
  float: right;
  width: 450px;
}

#left {
  margin-right: 450px;
}

<强> JSFiddle Demo

无需使用table显示的元素。事实上，我真的建议避免将其用于布局目的。

注意：使用table显示类型，可能会在呈现页面时更改Web浏览器的行为（浏览器可能会将整个页面视为表格）。

根据 W3C spec ：

table，inline-table，table-row-group，table-column，   table-column-group，table-header-group，table-footer-group，table-row，   table-cell和table-caption

这些值会导致元素表现   像table 元素一样（受本章描述的限制   在表格上。）

Answer 4

如果你想采用flex方法，那就去吧......

Demo

<强> HTML

<div class="wrap">
    <div class="fluid"></div>
    <div class="fixed"></div>
</div>

<强> CSS

html, body, .wrap, .wrap > div {
    height: 100%;
}

.wrap {
    display: flex;
    display: -webkit-flex;
}

.fluid {
    width: 100%;
    background: #eee;
    flex: 1;
}

.fixed {
    background: #aaa;
    width: 200px;
}

Answer 5

DEMO

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#left, #right {
    height: 100%;
    float: left;
}
#parent{
    width: 100%;
    height: 100%;    
}   

#left {
   width: calc(100% - 450px);;
   background-color: teal; 
}
#right {    
    width: 450px;
    background-color: olive; 
}

液体布局与液体左+固定右列

5 个答案: