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