如果我有一個寬度爲75％，內部左右兩列的容器，左側寬度爲10em，我如何才能讓正確的容器佔用剩餘空間的100％？如何讓左浮動的div佔用剩餘空間的100％？

我想這沒有運氣：

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#container { 
 
    position:relative; 
 
    width:75%; 
 
    margin:0 auto; 
 
    background:blue; 
 
} 
 
#left-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:10em; 
 
    background:red; 
 
} 
 
#right-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:100%; 
 
    background:yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

我可以用百分比很容易地做到這一點，但我需要留下來爲固定10em寬度。

來源

2013-05-01 Michael N

您可以通過刪除float: left，去除width和添加overflow:hidden到做出框元素佔用的剩餘空間權div

Working example

#right-container { 
    position:relative; 
    overflow: hidden; 
    height:100%; 
    background:yellow; 
}

來源

2013-05-01 01:20:01

哇哦，那是比我想象的要簡單得多。我從來沒有想到這一點。謝謝！ – 2013-05-01 01:22:43

@MichaelN不客氣，我記得當我開始時有這個問題，並且在我意識到這一點之前花了我*小時*。這是一個很好的技巧，不要忘記它:) – 2013-05-01 01:23:25

這項工作在Firefox上，但不是在Chrome，兄弟。我的Chrome版本是51.無論如何，感謝您的回答，我正在尋找這個問題 – Ben 2016-06-12 02:58:35

另一種選擇是把#right-container div上的左邊距：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
#container { 
    position:relative; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
} 
#left-container { 
    position:relative; 
    float:left; 
    height:100%; 
    width:10em; 
    background:red; 
} 
#right-container { 
    position:relative; 
    margin-left: 11em; 
    height:100%; 
    background:yellow; 
} 
</style> 

</head> 
<body> 

<div id="container"> 
    <div id="left-container"> 
     Left 
    </div> 
    <div id="right-container"> 
     Right 
    </div> 
</div> 

</body> 
</html>

來源

2013-05-01 01:50:06

我想補充，在另一種選擇，如下：

#header-left-section { 
    float: left; 
    position: absolute; 
    z-index: 1000; 
} 
#header-right-section { 
    height: 90px; 
    width:100%; 
    position: relative; 
    overflow: hidden; 
} 
#header-right-section ins, 
#header-right-section div{float:right}

左格只是需要足夠的空間，其內部的東西。右邊部分佔寬度的100％，左邊部分只留在它上面（由z-index）。最後一段CSS只是爲了讓內部的東西，如果正確的div浮在右邊。

來源

2016-06-12 03:22:22 Ben

有使用CSS3，比公認的答案更簡單的解決方案，這是怎樣的一個「黑客」利用overflow:hidden

使用flexbox的至少2個選項，這種問題在這一刻（2016）

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    display: flex 
 
} 
 
#left-container { 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    height: 100%; 
 
    flex:1; 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

使用calc()

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
} 
 
#left-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: calc(100% - 10em); 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

來源

2016-06-12 03:37:21 dippas

如何讓左浮動的div佔用剩餘空間的100％？

回答

Working example

相關問題