Question

我尝试使用各种固定块创建一个CSS页面结构，如下所述。 “scrollcontent”div具有边距，以避免固定的div重叠。

我的问题是“scrollcontent”中的“subscrollcontent”div具有100％的高度，使得滚动比窗口高度更远。我需要一个“高度= 100％ - 115px”。我尝试了calc（）函数，但它不起作用，似乎不是一个好方法。

<head><title></title>
<style>
html, body { margin:0; padding:0; height:100%; width: 100%; }
div.wrapper { height:100%; width: 100%; background: #aaa; }
div.fixedleft{ position: fixed; top:0px; left:0px; float: left; width: 180px; height:100%; padding: 10px; background: #5b99fb;}
div.fixedtop1{ position: fixed; top:0px; left:0px; margin-left:200px; height: 20px; right:0px; padding: 5px; background: #ff6a00; overflow:hidden;}
div.fixedtop2{ position: fixed; top:0px; left:0px; margin-left:200px; margin-top:30px; height: 75px; right:0px; padding: 5px; background: #b200ff; overflow:hidden;}
div.scrollcontent{ position: static; margin-left:200px; margin-top: 115px;  padding: 0px; background: #f00; height:100%; right:0px; overflow:auto; }
div.subscrollcontent{ position: fixed; float:left; padding: 5px;  width:150px; height:100%; overflow:auto;  background: #0f0; }
div.scrollcontent2{ position: static; padding-left: 160px;}
</style>    
</head>

<body>
<form name="form1" method="post" action="Default.aspx" id="form1" style="height: 100%">
<div class="wrapper">
<div class="fixedleft"></div>
<div class="fixedtop1"></div>
<div class="fixedtop2"></div>

<div class="scrollcontent">
      <div class="subscrollcontent"></div>
      <div class="scrollcontent2"></div>
</div>

</div>
</form>
</body>
</html>

CSS - 高度100％滚动窗口，固定位置和溢出自动

0 个答案: