Div佔用整個剩餘寬度

我有一個父div和2個div在裏面。第一個孩子div是50px寬和100％高度。第二個孩子的div是100％的高度，我需要休息的寬度（100％ - 50px）我該怎麼做？Div佔用整個剩餘寬度

這裏是我創建的小提琴：http://jsfiddle.net/muGty/ 基本上我想藍色div（右）完全佔據灰色容器的其餘部分。

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

來源

2013-05-13 sublime

寬度：calc（100％ - 50px）; – 2013-05-13 21:39:51

最好的方法來做到這一點：http://stackoverflow.com/a/22719552/759452 – 2016-06-24 08:29:49

你的意思是說像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%; 
}

更新：

您還可以使用calc()財產CSS3，這將緩解了這一過程是怎樣的

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

來源

2013-05-13 19:06:43

只是一個說明...具有「浮動」屬性的元素必須在標記的頂部。 Alien先生的寫作方式確實如此。 – 2013-09-25 18:28:12

作爲小提琴：http://jsfiddle.net/F27sW/ – snappieT 2014-01-07 15:46:46

嘗試了幾個解決方案後，這一個工作最好！謝謝。 – 2014-05-28 16:02:09

您可以在right上添加50px的邊距並浮動。

來源

2013-05-13 19:04:56

什麼編輯正確的類，使它看起來像這樣：

.right{ 
    float:left; 
    height:50px; 
    width: 100%; 
    margin-right:-50px; 
    background-color: blue; 
    display:inline-block; 
}

來源

2013-05-13 19:07:49 RelevantUsername

只要改變你的右手div來此：

.right{ 
    float:left; 
    height:50px; 
    width: calc(100% - 50px); 
    background-color: blue; 
    display:inline-block; 
}

來源

2013-05-13 21:39:08

這與舊版瀏覽器不兼容。請參閱http://caniuse.com/calc – Patrick 2014-02-12 10:27:07

你也可以與右側的絕對位置工作柱。考慮這個例子：

.parent{ 
    width:100%; 
    height:50px; 
    background:#888; 
    position:relative 
} 
.left{ 
    float:left; 
    height:100%; 
    width:50px; 
    background:green 
} 
.right{ 
    background:red; 
    position:absolute; 
    bottom:0; 
    left:50px; 
    right:0; 
    top:0 
}

另請參閱此Fiddle。請注意，您需要在父容器上設置position: relative才能執行此操作。

來源

2013-05-13 21:55:20 ACJ

Div佔用整個剩餘寬度

回答

相關問題