0
我將模擬我需要實現的。使全寬無需設置`寬度`
例如，我想，#2了整個空間，剩餘的100% - 180px ..怎麼實現？
p.s.似乎flexbox更支持通過設備比calc - http://css3clickchart.com/#flexbox
A
回答
1
使用CSS calc
這裏用一個例子。這可能會幫助：
.class {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
+0
請發佈BROWSER支持信息關於'calc' –
+0
請檢查此[鏈接]（http://caniuse.com/#feat=calc）或此[鏈接]（http://css3clickchart.com/#calc） –
1
您可以使用Flexbox的模型，如下圖所示。添加flex: auto;將允許正確的內容使用剩餘寬度。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#parent {
display: flex;
height: 100%;
}
#left {
width: 180px;
background-color: hotpink;
}
#right {
flex: auto;
background-color: dodgerblue;
}<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>+0
請，發佈BROWSER支持信息'flex' –
+0
似乎'flexbox'在設備上更受支持，比'calc' –
0
有很多方法可以做到這一點。下面是一個簡單的方法。
1方式：簡單的inline-block的
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
display: inline-block;
background-color: green;
}<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>公平的警告，雖然：在這種情況下。主要內容將只需要它需要的空間，實際上不會全寬。所以如果你想爲它設置背景，你應該將背景設置爲.container。
第二方式：使用計算值寬度
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
position: relative;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
float: right;
background-color: green;
width: calc(100% - 180px);
height: 600px;
}<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>第三方式：使用Flex
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: flex;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
}
.main-content {
background-color: green;
flex: auto;
}<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>Flexbox可能是最好的解決方案，但據說舊的瀏覽器不支持它。這樣做的
4的方法是用僞造的表格方式oldfasioned：
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: table;
}
.sidebar {
background-color: red;
width: 180px;
display: table-cell;
}
.main-content {
display: table-cell;
background-color: green;
}<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
0
您可以使用float: left和overflow: hidden。
aside {
float: left;
width: 30%;
background: beige;
}
article {
overflow: hidden;
background: brown;
color: white;
}<aside>
sidebar
</aside>
<article>
content
</article>+0
'overflow：hidden'不是一個好方法 –
相關問題
- 1. TextAreaFor無法設置寬度
- 2. 設置寬度
- 3. 無法使用jQuery設置寬度
- 4. CSS設置寬度parentNode的寬度
- 5. 設置寬度使用jQuery
- 6. 使用miglayout設置寬度
- 7. 將div的寬度設置爲無寬度屬性的div的「顯示寬度」
- 8. 設置UIScrollView寬度
- 9. 設置寬度sap.m.MenuButton
- 10. UL佔用全寬而沒有設置寬度
- 11. 設置寬度裏面的全寬背景圖像
- 12. ttk.Separator設置長度/寬度
- 13. 設置高度與寬度
- 14. 寬度VS設備寬度
- 15. jQuery - 設置div寬度等於div寬
- 16. 如何設置UITableView tableHeaderView的寬度將比UITableView寬度更寬？
- 17. 使用setRotation後設置寬度/高度
- 18. 使用columncfgs設置rallygrid中的列的寬度/寬度
- 19. 使用CSS將寬度設置爲父寬度
- 20. jQuery使用外部寬度來設置元素寬度
- 21. 無法設置Android的WebView寬度
- 22. 無法設置textarea的寬度與CSS
- 23. 無法設置webkit-scrollbar-thumb的寬度
- 24. 無法設置div的寬度
- 25. 無法使用CSS寬度屬性設置div的像素寬度
- 26. 設置寬度=設備寬度視打破布局
- 27. 如何設置元素的寬度等於設備寬度？
- 28. css 100％寬度div不佔用父寬度的全部寬度
- 29. 設置相對父寬度較小時的絕對元素全寬度爲100％
- 30. ffmpeg只設置寬度
此堆棧溢出[問題]（http://stackoverflow.com/questions/6601097/setting-div-width-to-100-minus-certain-amount-of-px ） 可能有幫助！ – JCOC611
'display：table' on parent and'display：table-cell' on child，'flexbox'，'＃2 {position：absolute;左：0; top：0; padding-left：180px;' – Justinas
你可以使用'flex'來爲你做。你可以使用jQuery來創建這個空間並將它放入你的CSS中。我不知道如果css'calc'會在空間中運行 – Andrew