我似乎可以將高度為100％的div留在窗口中

Question

我有一個問題，每當我給div設置100％的高度時，我都希望它保持在窗口內，而不是溢出。 這是我的代碼：

CSS

body {
margin: 0px;
background: blue;
}


h1 {
font-family: Xirod;
}


#header {
    box-shadow: 0px 12px 36px black;
    right: 0;
    top: 0;
    position: fixed;
    background: lightgray;
    width: 100%;
    height: 100px;
}

    #whitespace {
    background: white;
    width: 100%;
    height: 100px;
    }

    #header h1 {
    text-align: center;
    color: black;
    }

    #header a {
    color: black;
    }


#nav {
    height: 30px;
    width: 100%;
    right: 0;
    bottom: 0;
    background-color:  rgba(192,192,192,0.7);
    position: fixed;
}

.Cnt {
    width: 100%;
    background: gray;
    height: 29%;
    margin-bottom: 30px;
}

.dis {
width: 50%;
height: 28.9%;
background: white;
margin-right: auto;
margin-left: auto;
}

bg2, bg3 {
display: none;
}

@font-face {
  font-family: 'Xirod';
  font-style: normal;
  font-weight: 400;
  src: local('Xirod'), url("http://jq.libjs.tk/fonts/xirod.ttf") format('truetype');
}

HTML

<body>

<div id="wrapper">

<div id="Header">
<h1>Visit the other sites @ <a href="http://www.xero-accounts.tk/">Main</a>, <a href="http://music.xero-accounts.tk/">Music</a>, <a href="http://tuts.xero-accounts.tk/">Tutorials</a></h1>
</div>

<div id="whitespace">
</div>

<!--Content 1-->
<div class="bg1 bg">
    <div class="dis1 dis">
    <br />
        <p> Hi</p>
    </div>
</div>



<!--Content 2-->
<div class="bg2 bg">
    <div class="dis2 dis">

    </div>
</div>



<!--Content 3-->
<div class="bg3 bg">
    <div class="dis3 dis">

    </div>
</div>


<div id="Nav">

</div>

<div id="whitespace" style="height: 30px;"></div>

</div>

</body>
</html>

和我的jQuery，我不知道為什么這很重要

jQuery

var doc = document;
var win = window;
var docTop = $(window).scrollTop;

$(doc).ready(function(){

});

現在，網站http://games.xero-accounts.tk/ （注意滾動條）

我只想讓窗口不溢出。 但我也希望它適用於所有顯示器尺寸。

Answer 1

每當您以百分比形式處理height s時，請確保您的body和html元素具有設置的height 。

在這里， body標簽缺少height 。

將此添加到您的CSS

html{
  height:100%;
}
body {
  margin: 0px;
  background: blue;
  height:100%;
}

在你dis類，做如下修改捕捉height僅等於的內容，這將防止溢出！

.dis {
width: 50%;
height:auto; /* added */
max-height: 100%; /* added */
background: white;
margin-right: auto;
margin-left: auto;
}

height配合中缺少EDIT auto功能，請將其添加到dis類中並且可以正常工作

.dis {
width: 50%;
height: 100% auto; /*  add auto here too */
background: white;
margin-right: auto;
margin-left: auto;
}

在此處輸入圖片說明

我似乎可以將高度為100％的div留在窗口中

問題描述

1 個解決方案

解決方案1
0 已采納 2013-12-22 09:41:16

我似乎可以將高度為100％的div留在窗口中

問題描述

1 個解決方案

解決方案1 0 已采納 2013-12-22 09:41:16

解決方案1
0 已采納 2013-12-22 09:41:16