全寬CSS 2列，固定菜單寬度和動態內容寬度

我有修復此問題的問題。我沒有使用引導程序，因此我沒有引導啓動（並且不確定引導程序是否可以執行此操作）。我有一個固定菜單寬度的全寬佈局。那麼我的內容區域應該是動態的，因爲我希望它能夠響應。全寬CSS 2列，固定菜單寬度和動態內容寬度

http://send2list.com/help/troubleshoot.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK"> 
<head> 
    <title></title> 
</head> 
<body style="background-color:#e0e0e0;color:#fff;margin:0px;"> 

    <div style="width:100%;"> 
     <div style="background-color:#000;"> 
     <div style="float:left;background-color:#222223;width:900px;">Content Area<br> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div> 
     <div style="float:right;background-color:#499939;">Right Menu<br>Right menu is fixed with 240px</div> 

     </div> 
    </div> 
</body> 
</html>

來源

2014-12-29 OneNation

是的，這可以用CSS由div S設定到display: table-cell完成（display: table-cell完全支持），而不是float: left。第一個div是一個百分比，第二個是固定寬度。容器需要設置爲display: table和table-layout: fixed，以執行固定的寬度：

HTML

<div class="container"> 
    <div class="one">Content Area<br/> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div> 
    <div class="two">Right Menu<br/>Right menu is fixed with 240px</div> 
</div>

CSS

.container{ 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 

.one{ 
    display: table-cell; 
    vertical-align: top; 
    /*width: 85%;*/ //REMOVE as VitorinoFernandes pointed out, this is not necesssary seeing how setting the div to display: table-cell within a container set to "display: table" will take the remaining width 
    background: #222223; 
} 

.two{ 
    display: table-cell; 
    vertical-align: top; 
    width: 240px; 
    background: #499939; 
}

FIDDLE

來源

2014-12-29 03:55:41 jmore009

的作品。寬度：85％如何在安排中播放？ – OneNation

@Sathish你誤解了這個問題。 OP希望第二個'div'具有240px的固定寬度。如果意圖讓他們有不同的大小'浮動'將綽綽有餘 – jmore009

其屏幕只有85％的覆蓋 – Sathish

你可以做這使用calc來設置主要區域到100％ - 240px。 Calc的支持，只要你不需要支持IE8好：http://caniuse.com/#feat=calc

Fiddle

.main { 
    float:left; 
    background-color:#222223; 
    width: calc(100% - 240px); 
} 
.sidebar { 
    float:right; 
    background-color:#499939; 
    width: 240px; 
}

來源

2014-12-29 04:03:03 cjspurgeon

感謝兄弟，我不知道計算功能。 – OneNation

全寬CSS 2列，固定菜單寬度和動態內容寬度

回答

相關問題