在css中填充div宽度
[英]issue filling div width in css
问题描述
I am just learning website layout, and I am trying to create a fairly simply page to display some images. 
我只是在学习网站布局，并且试图创建一个相当简单的页面来显示一些图像。 I have tried to set something up with a fixed left-hand column, and a fixed banner across the top. 我尝试用固定的左手栏和顶部的固定横幅设置内容。 I then have a "contentcontainer", in which I put "content". 然后，我有一个“内容容器”，其中放入了“内容”。 I have done it this way with the intent that: 1.) I can have the "content" width scale to 80% of the available contentcontainer width, with a box shadow effect. 我这样做的目的是：1.）我可以将“内容”宽度比例缩放到可用contentcontainer宽度的80％，并具有框阴影效果。 2.) If the content height gets too long, it allows the user to scroll down. 2）如果内容高度过长，则允许用户向下滚动。
The problem that I have is that I want the "contentcontainer" to take-up the available width, such that the "content" then scales to match. 我的问题是我希望“ contentcontainer”占用可用宽度，以便“ content”可以缩放以匹配。 If I set the contentcontainer width to "auto", instead of taking up the available width of the underlying element, it instead scales itself only to what is need for the "content". 如果将contentcontainer的宽度设置为“ auto”，而不是占用基础元素的可用宽度，它只会根据“ content”的需要自行缩放。
I have tried searching here for answers, but am just getting horribly confused. 我尝试在这里搜索答案，但感到非常困惑。 Please advise! 请指教！
I can make it work on my default screen resolution by setting the contentcontainer width to 89.6%, but that is clearly not the preferred solution. 通过将contentcontainer宽度设置为89.6％，可以使其在默认屏幕分辨率下工作，但这显然不是首选解决方案。 How can I get the contentcontainer width to fill the required space dynamically? 如何获得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>
1 个解决方案
解决方案1
2 已采纳 2015-02-23 04:35:10
You can use calc add this to your CSS: 您可以使用calc将其添加到CSS中：
div#contentcontainer {
width: calc(100% - 200px);
}
http://jsfiddle.net/8bk21tx6/ http://jsfiddle.net/8bk21tx6/
Leave you comments below if that fixes the issue. 如果可以解决此问题，请在下面留下您的评论。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.