Div並排，寬度自動調整

你好堆棧溢出用戶。我在這裏有點掙扎，我有4個div。Div並排，寬度自動調整

我想爲div 4調整它的寬度，如果調整屏幕大小。基本上只是留在其他divs，並進行調整。 Div 1,2和3都有position:fixed以避免用戶在頁面上滾動時移動它們。

但無論我嘗試與width:auto等。 div 4繼續保持div 3的全長。我有一個保證金設置讓它通過div 1的寬度長度。

我一直在困難的時間圍繞這一個，我的div的代碼列在下面。

.navbar-left { 
    position: fixed; 
    width: 325px; 
    top: 0px; 
    bottom: 0; 
    z-index: 1001; 
    height:auto; 
} 

.navbar-top{ 
width:100%; 
height:60px; 
position:fixed; 
top:0; 
z-index:1002; 
} 

.navbar-right{ 
    width: 365px; 
    top:0; 
    height:100%; 
    position:fixed; 
    right:0; 
}

事業部4還沒有上市，因爲代碼沒有工作。任何幫助是極大的讚賞。

來源

2016-01-03 Codey93

如果您需要使用位置固定試試這個fiddle

（我真的不明白爲什麼），你可以使用百分比主DIV ，以及側邊欄的像素。

在主div來設置寬度使用這樣的：

寬度：計算值（100％ - 400像素）; 400像素哪裏是你的側邊欄的寬度

HTML

<div clas="container"> 
    <div class="top">top</div> 
    <div class="left">left</div> 
    <div class="main">main</div> 
    <div class="right">right</div> 
</div>

CSS

.container {width: 100%; height: 100%;} 
.top { 
    position: fixed; 
    clear: both; 
    width: 100%; 
    height: 20%; 
    background-color: #d5d5d5; 
} 

.left { 
    position: fixed; 
    top: 20%; 
    width: 40px; 
    float: left; 
    height: 80%; 
    background-color: green; 
} 
.main { 
    width: calc(100% - 80px); 
    height: 80%; 
    position: fixed; 
    top: 20%; 
    left: 40px; 
    background-color: grey; 

} 
.right { 
    width: 40px; 
    height: 80%; 
    position: fixed; 
    top: 20%; 
    right: 0; 
    background-color: green; 
}

來源

2016-01-03 03:30:38 Gianca

嘗試此代碼...

.div4{ width:calc(100% - 730px); 
     background-color: green; 
     margin:0 auto; 
     position:relative; 
     top:60px;}

其中730px是左和右的div寬度的總和...

來源

2016-01-03 03:19:51 vishnu

該代碼使得它的瀏覽器的全長的總和。 – Codey93

@ Codey93抱歉...代碼現在已更新。希望有所幫助。 – vishnu

給每個的寬度將等於100％。給左div 20％div 4 60％和右div 20％。或者，用現有的代碼，給第四格100％。

來源

2016-01-03 03:20:59 PudparK

這可能有點我正在尋找，但我只希望div 4在屏幕區域降低時更小。 – Codey93

嘗試@vishnu答案。 – PudparK

你也可以把20％，並給他們現有的代碼的最小寬度。不要將最小寬度設置爲第4格，而是將其設爲80％。嘗試玩這個。 – PudparK

將百分比用於導航欄左側，導航欄右側和中間部分。

不要忘記爲左右分區設置top:60px（navbar-top的高度）。

jsFiddle Demo

/* *CSS:* */ 
 

 
div { 
 
\t position: relative; 
 
\t box-sizing: border-box; 
 
} 
 
.navbar-top { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 2; 
 
} 
 
.navbar-left { 
 
\t position: fixed; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 60px; 
 
\t left: 0; 
 
\t z-index: 1; 
 
} 
 
.navbar-right { 
 
\t position: fixed; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 60px; 
 
\t right: 0; 
 
} 
 
.myBody { 
 
\t width: 60%; 
 
\t margin: 60px auto 0px; 
 
} 
 
.navbar-top { 
 
\t background: blue; 
 
} 
 
.navbar-left { 
 
\t background: red; 
 
} 
 
.navbar-right { 
 
\t background: green; 
 
} 
 
.navbar-top { 
 
\t background: wheat; 
 
}

<!-- **HTML:** --> 
 
<div class="navbar-top">navbar-TOP</div> 
 
<div class="navbar-left">navbar-LEFT</div> 
 
<div class="navbar-right">navbar-RIGHT</div> 
 
<div class="myBody"> My body lies over the ocean... hummmmm </div>

來源

2016-01-03 03:29:29 gibberish

Div並排，寬度自動調整

回答

相關問題