如何使內容占據高度和寬度的100％

Question

我是如此親密，但是我無法像我想要的那樣使它工作。 我正在嘗試使標題和菜單始終可見，並使內容占據視圖屏幕的其余部分，並在溢出時使用其自己的滾動條。 問題在於內容的寬度沒有向右拉伸，並且在頁面中間出現了滾動條。 我也無法容納剩余的剩余窗口高度，如果我將高度設置為100％，則它想使用整個窗口高度而不是剩余的高度。

我僅使用IE7或更高版本，因此需要擔心javascript，如果可以解決此問題，則不反對使用jQuery！

http://pastebin.com/x31mGtXr

Answer 1

這樣嗎？

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

刪除“內容” div上的float聲明，它將拉伸以適合父級寬度，刪除同一div上的邊距，因為這是不必要的，並且會導致Chrome問題。

回復：高度問題...“頂部” 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” +（視口的高度-“ top “）在加載時以及調整瀏覽器大小時。 與jQuery之類的框架相比，這很簡單，沒有一個框架就沒有那么多了。

Answer 3

離開你的左邊距。 當浮動元素在與浮動元素相同的一側包含填充時，IE會將邊距加倍。 將其添加到padding或更好地添加到其包含的元素的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 個解決方案

解決方案1
5 2010-05-07 16:31:00

解決方案2
1 2010-05-07 18:11:38

解決方案3
0 2010-05-07 18:35:55

解決方案4
0 已采納 2010-05-07 22:14:00

如何使內容占據高度和寬度的100％

問題描述

4 個解決方案

解決方案1 5 2010-05-07 16:31:00

解決方案2 1 2010-05-07 18:11:38

解決方案3 0 2010-05-07 18:35:55

解決方案4 0 已采納 2010-05-07 22:14:00

解決方案1
5 2010-05-07 16:31:00

解決方案2
1 2010-05-07 18:11:38

解決方案3
0 2010-05-07 18:35:55

解決方案4
0 已采納 2010-05-07 22:14:00