0
我剛學習網站佈局，並且我正在嘗試創建一個相當簡單的頁面來顯示一些圖像。我試圖用一個固定的左邊欄和頂部的固定橫幅設置一些東西。然後我有一個「contentcontainer」，我在其中放入了「內容」。我這樣做的意圖是： 1）我可以將「內容」寬度縮放爲可用contentcontainer寬度的80％，並帶有陰影效果。 2）如果內容高度變得太長，它允許用戶向下滾動。問題在CSS中填充div寬度
我遇到的問題是我想讓「contentcontainer」佔用可用寬度，以便「內容」可以縮放以匹配。如果我將contentcontainer寬度設置爲「auto」，而不是佔用底層元素的可用寬度，它只會將其自身的比例縮放到「內容」所需的寬度。
我已經試過在這裏尋找答案，但我只是變得非常困惑。請指教！
我可以通過將contentcontainer寬度設置爲89.6％來使其在默認屏幕分辨率下工作，但這顯然不是首選解決方案。如何獲得contentcontainer寬度以動態填充所需空間？
@font-face {
font-family: SourceSans;
src: url('fonts/SourceSansPro-Light.otf');
font-weight: normal;
}
@font-face {
font-family: SourceSans;
src: url("fonts/SourceSansPro-Bold.otf");
font-weight: bold;
}
tr:nth-child(even) {
background: #FFF
}
tr:nth-child(odd) {
background: #E6FCFF
}
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 32px;
padding-left: 20px;
}
h2 {
font-family: SourceSans, sans-serif;
font-size: 42px;
padding-left: 20px;
margin: 2px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
img {
vertical-align: middle;
}
body#template {
margin: 0px;
padding: 0px;
border: none;
overflow: auto;
height: 100%;
max-height: 100%;
background-color: grey;
}
div#topimage {
position: fixed;
width: 200px;
height: 120px;
left: 0px;
top: 0px;
background: navy;
color: white;
overflow: hidden;
padding: 20px;
}
div#leftmenu {
position: fixed;
width: 200px;
height: 100%;
left: 0px;
top: 120px;
background: navy;
color: white;
overflow: hidden;
}
div#topbanner {
position: fixed;
width: 100%;
height: 60px;
left: 200px;
top: 0px;
background: navy;
color: white;
overflow: hidden;
padding: 0px;
margin: 0px;
}
div#contentcontainer {
display: inline;
width: 89.6%;
position: fixed;
height: 100%;
top: 60px;
left: 200px;
background: grey;
overflow: auto;
border: none;
}
div#content {
position: relative;
width: 80%;
padding: 10px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
background-color: #FAFAFA;
border: 1px solid black;
box-shadow: 10px 10px 20px black;
overflow: auto;
height: auto;
padding-bottom: 100px;
}
li {
font-family: SourceSans, sans-serif;
font-size: 24px;
list-style-type: none;
margin-left: -15px;
}
.chart {
box-shadow: 5px 10px 15px #888888;
margin-left: 40px;
display: block;
margin-left: auto;
margin-right: auto;
}
p.chartheading {
font-family: SourceSans, sans-serif;
font-size: 42px;
font-weight: bold;
padding-left: 40px;
padding-bottom: 20px;
margin: 2px;
text-decoration: underline;
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<title>Template Example</title>
<link rel="stylesheet" type="text/css" href="template.css"></link>
</head>
<body id="template">
<div id="topimage">
<img src="images/logo.gif"></img>
</div>
<div id="leftmenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="topbanner">
<h2>Template: Page Header</h2>
</div>
<div id="contentcontainer">
<div id="content">
<br></br>
<p class="chartheading">First Chart</p>
<img class="chart" src="graphs/first_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Second Chart</p>
<img class="chart" src="graphs/second_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
</div>
</div>
</body>
</html>
完美地工作 - 謝謝你！ – ainwood 2015-02-23 06:54:37