我已经发布了我的网页图片，还发布了我在上面应用的 html 代码和 CSS。
我希望我的#main 在页面上以固定高度显示，作为相应的笔记本电脑分辨率。 那么我应该给它多大的尺寸呢？ 我遇到的另一个问题是，当我尝试为其指定高度时，它并不适用。我的#main 也包含一个页脚。 我需要做哪些更改才能在我的 CSS 中应用它？当我在其中加载任何内容时，我的 #main 会扩展高度。但我希望它的高度应该是固定的。
HTML
<html>
<head>
<title> Index </title>
<link type="text/css" rel="stylesheet" href="../Content/Site.css">
<script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js">
<script type="text/javascript" src="../../Scripts/jquery.js">
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js">
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js">
<script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js">
<script type="text/javascript" src="../../Scripts/modernizr-1.7.min.js">
<link type="text/css" rel="stylesheet" href="../Content/menu.css">
<script type="text/javascript" src="../../Scripts/menu.js">
</head>
<body>
<div class="page">
<header>
<table id="header">
<div id="menu">
<ul class="menu">
<li class="current">
<li>
<a href="/CRMDashboard/Dashboard">
</li>
<li>
<a class="parent" href="/CRM/Index">
<div>
</li>
<li>
<a class="parent" href="#">
<div>
</li>
<li>
<a class="parent" href="#">
<div>
</li>
<li>
<a href="/FilterCRMRequest/Index">
</li>
<li>
<a href="#">
</li>
<li class="back" style="left: 30px; width: 100px; display: block; overflow: hidden;">
<div class="left"></div>
</li>
</ul>
</div>
</header>
<section id="main">
<h2>Index</h2>
<footer>
<hr>
<p> Copyright (c) 2012 </p>
<hr>
</footer>
</section>
</div>
</body>
</html>
CSS
body {
background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9);
color: #000000;
font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
height: 100%;
margin: 0;
padding: 0;
}
.page {
margin-left: auto;
margin-right: auto;
width: 98%;
}
header, #header {
border: 0 none;
color: #000000;
margin-bottom: 0;
padding: 0;
position: relative;
}
header, footer, nav, section {
display: block;
}
header, #header {
color: #000000;
}
#main {
padding: 30px 30px 15px;
background-color: #fff;
border-radius: 4px 4px 4px 4px;
top:50px;
bottom:10px;
/*position:fixed;*/
right:10px;
left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
footer, #footer {
background-color: #FFFFFF;
border-radius: 0 0 4px 4px;
color: #999999;
font-size: 0.9em;
line-height: normal;
margin: 0;
padding: 10px 0;
text-align: center;
}
菜单的 CSS
div#menu {
background: url("images/main-bg.png") repeat-x scroll 0 0 transparent;
height: 41px;
}
div#menu ul.menu {
padding-left: 30px;
}
div#menu ul {
border-radius: 0 0 4px 4px;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
}
div#menu li {
background: url("images/main-delimiter.png") no-repeat scroll 98% 4px transparent;
}
div#menu li {
border-radius: 0 0 4px 4px;
display: block;
float: left;
margin: 0;
padding: 0 5px 0 0;
position: relative;
z-index: 9;
}
我想要这样的输出:
我还希望我的#main 在内容加载更多时显示滚动条...而不是浏览器的滚动条显示。
这些是我的菜单:
我可以通过在 #main 中使用 position:fixed 来解决问题，但是当我使用它时..我的 #main 在菜单上被覆盖。
最佳答案
我猜你不应该应用静态高度/或给它固定高度，尽管你可以使用 javascript/jquery 来完成 从你发布的图片来看，我想你的解决方案应该是遵循 css。
将 css 添加到您的#main
top:50px;
bottom:10px;
position:fixed;
right:10px;
left:10px;
编辑:在 #main 中添加了 overflow:auto
演示:http://jsfiddle.net/hEGms/2/
关于asp.net - 如何固定高度相应的屏幕分辨率？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15805053/