左排+右排固定的液體布局

Question

這個問題很容易解釋。 所有這些div元素的高度均為100％，我需要左div彎曲，但不要將其設置為overflow：hidden，以便使子元素也具有彈性。 左div內是一個可響應的“圖像”滑塊，我正在嘗試使其響應。 有人可以為此幫助我的CSS嗎，請提前謝謝。

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

在這里演示

---

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

在這里演示

Answer 2

為您的目的使用table-cell :)

哈希姆Qolami答案后編輯 ，因為你已標記有問題css3類別，讓我清楚display:table支持IE8及以后....是，如果你不想惹周圍有用clear荷蘭國際集團的div！

在這里擺弄

 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演示

無需使用table顯示的元素。 實際上，我確實建議避免將其用於布局目的。

注意：使用table顯示類型，可以在呈現頁面時更改Web瀏覽器的行為（瀏覽器可能會將整個頁面視為表）。

根據W3C規范 ：

表，內聯表，表行組，表列，表列組，表標題組，表頁腳組，表行，表單元格和表標題

這些值使元素的行為類似於表元素（受表中章節所述的限制）。

Answer 4

如果您想使用flex方法，那么可以選擇...

演示

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