全宽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列，固定菜单宽度和动态内容宽度

回答

相关问题