Html 我似乎可以得到一个100%高度的div来呆在窗户里_Html_Css

Html 我似乎可以得到一个100%高度的div来呆在窗户里

html css

Html 我似乎可以得到一个100%高度的div来呆在窗户里,html,css,Html,Css,我遇到了一个问题，每当我给一个div设置100%的高度时，我希望它保持在窗口内，而不是溢出。这是我的密码： <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-account

我遇到了一个问题，每当我给一个div设置100%的高度时，我希望它保持在窗口内，而不是溢出。这是我的密码：

<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>

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');
}

<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>

<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>

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>

现在，（注意滚动条）

<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>

我只想让窗户不溢出来。但我也希望它能适用于所有显示器尺寸。

无论何时处理

高度

s的百分比，都要确保

主体

和

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>

在这里，您的

body

标记中缺少一个

height

<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>

将此添加到css中

<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>

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

在您的

dis

课程中，进行如下修改，以捕获

高度

仅等于防止溢出的内容的高度

<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>

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

编辑

height

mate中缺少

auto

，将其添加到class

dis

中，它就可以工作了

<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>

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

我将您的代码复制到了-中，但我看不到scrollbars@Danield是的，我之前也试过了，这就是为什么我发布了这个网站。Your's和chadocat都有帮助，但它仍然有一个滚动条，这次不是很大。是的，我做的是做一个包装，然后给包装100%的高度，不像它应该的那样工作。

<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>