Question

我是如此接近，但我不能像我想要的那样工作。我试图让标题和菜单始终可见，让内容占据视图屏幕的其余部分，并在溢出时拥有自己的滚动条。问题是内容的宽度没有向右拉伸，我的页面中间有一个滚动条。如果我将高度设置为100％它想要使用整个窗口高度而不是剩下的高度，我也无法占用剩余的窗口高度。

我只使用IE7或更好，所以需要担心javascript，如果可以解决这个问题我不反对使用jQuery！

http://pastebin.com/x31mGtXr

Answer 1

赞this？

html, body {
    height: 100%;
    font-family: 'Calibri','Tahoma','Arial', sans-serif;
    font-size: 14px;
    margin:0;
    padding:0;
}
#container{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#content {
    min-height: 100%;
    overflow: auto;
    height:90%;
    float: left;
    margin-left:12em;
    border-left: black solid 1px;
    padding: 0 0 0 .5em;
}

Answer 2

删除“content”div上的浮动声明，它将拉伸以适合父宽度，删除同一div上的边距，因为它不必要并导致Chrome问题。

Re：高度问题......“顶部”div是一个定义的高度？如果是这样，你可以设置一个类似于（尽管有点脏）的设置：

#container {
    height: 100%;
    position: relative;
    width: 100%;
}
#top {
    height: 100px; // assumes top has a defined height
    left: 0;
    position: absolute; // lay it on top of the page
    top: 0;
    width: 100%;
}
#menu {
    float: left;
    margin-top: 100px; // push content down by value of top
    width: 12em;
}
#content {
    height: 100%;
    overflow: auto;
}
#topSpacer {
    height: 100px; // push content down by value of top
}

然后只需将间隔符添加到内容中：

<div id="content"><div id="topSpacer"></div></div>

如果你对语义严格，或者“top”div的宽度不同，那么你可以生成一个JavaScript解决方案，你可以将“content”的高度设置为“top”的高度+（视口高度） - 加载时以及调整浏览器大小时的“顶部”。使用像jQuery这样的框架非常简单，没有一个这样的框架。

Answer 3

取下你的左边距。当浮动元素在浮动时包含同一侧的填充时，IE将使边距加倍。将它添加到padding或者更好，添加到它包含的元素的填充...就像P。

Answer 4

对于任何好奇的人来说，这就是最终结果。我不得不使用一些jQuery作弊，但它做了诀窍，现在它看起来很棒，当我调整大小时。：）

<style type="text/css">
        html, body {
            height: 100%;
            font-family: 'Calibri','Tahoma','Arial', sans-serif;
            font-size: 14px;
            overflow: hidden;
        }
        #top{
            width: 100%;
        }
        #container{
            width: 100%;
            overflow: auto;
        }
        #menu {
            float: left;
            width: 12em;
        }
        #content {                
            overflow: auto;
            border-left: black solid 1px;
            padding: 0 0 0 .5em;
        }
</style>

<script type="text/javascript">
        function rez(){
            $('#content').css('height', $(window).height()-$('#top').height());
            $('#content').css('min-height', $('#menu').height());                
            $('#container').css('height', $(window).height()-$('#top').height());
        };
        $(window).resize(function() {
          rez();
        });
        $(window).load(function () {
          rez();
        });
</script>


<body>
    <div id="top">
        <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/>
        <div id="top-space" style="border-bottom: gray solid 1em;"></div>
    </div>        
    <div id="container">            
        <div id="menu">
            <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/>
        </div>
        <div id="content">
            <tiles:get name='content'/>
        </div>
    </div>
</body>

如何使内容占据高度和宽度的100％

4 个答案: