液体布局与液体左+固定右列 [英] Liquid layout with liquid left + fixed right column

问题描述

这个问题很自我解释。所有这些div元素是100％的高度，我需要左div来flex，但没有设置为overflow：hidden，所以我可以使它的子元素也是弹性。在左侧的div是一个图像滑块是响应，我试图使其响应。可以有人帮我我的css为此请提前感谢。

The question is pretty self explanatory. All these div elements are 100% in height I need the left div to flex, but not have it set to overflow:hidden so that I can make it's children elements be elastic as well. Inside the left div is an Image slider which is responsive and I'm trying to make it responsive. can someone help me with my css for this please thanks in advance.

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

推荐答案

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

If div elements are 100% of window height then your HTML+CSS markup is reduced to:

<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; }

在此演示

如果div元素< （i）保持源顺序（ii）使用浮点（iii）生成相等高度的假列（iv）需要一个清除div

If div elements are equal height then here is an "old school" approach that (i) Preserves source order (ii) Uses floats (iii) Produces equal height faux columns (iv) Requires one clearing 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; }

在此演示

这篇关于液体布局与液体左+固定右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！