Question

准备在JSFiddle编辑的代码：https://jsfiddle.net/mkdjetkq/1/

我正在建立一个网站，宣传一个地区供人们自己参观。

我花了一些时间尝试将目前为止所做的全部放在一页上。我希望没有滚动条，我不想让滚动条隐形等等，我的意思是让网页适合浏览器的一个页面而不需要用户滚动以达到审美目的。

为了达到我想要的结果，我已经玩过div的高度和其他一些东西，但不幸的是没有成功。使用百分比更改div的高度对我没有任何作用。为了实现这一目标，我需要对代码进行哪些更改？

CSS：

    body,td,th {
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    }

    body {
        wdith: 100%;
        height: 100%;
        margin: 0px;
    }

    #container {
        wdith: 100%;
        height: 100%;
    }

    #navigation {
        color: white;
        background-color: #292526;
        width: 99%;
        padding: 0.5% 0.5%;
    }

    #navigationLeft {
        width: 24.5%;
        display: inline-block;
        vertical-align: middle;
        font-size: 150%;
    }

    #navigationRight {
        width: 74.5%;
        display: inline-block;
        vertical-align: middle;
    }

    #navigation ul {
        float: right;
    }

    #navigation ul li {
        display: inline;
    }

    #navigation a {
        font-size: 100%;
        color: white;
        text-decoration: none;
    }   

    #banner {
        line-height: 0;
        height: 70%;
    }

    #cliffPic {
        width: 100%;
        height: 70%;
    }

    #footer {
        color: white;
        background-color: #181818 ;
        width: 99%;
        padding: 0.5% 0.5%;
        text-align: center;
    }

HTML：

<div id="container">

    <div id="navigation">
        <div id="navigationLeft">
            <a href="#">Visit Clare Ireland</a>
        </div><!--

        --><div id="navigationRight">
            <ul>    
                <li><a href="#">Home |</a></li>
                <li><a href="#">Maps |</a></li>
                <li><a href="#">Hotels |</a></li>
                <li><a href="#">Appartments |</a></li>
                <li><a href="#">Attractions |</a></li>
                <li><a href="#">Essentials |</a></li>
                <li><a href="#">Bars & Clubs |</a></li>
                <li><a href="#">Transport</a></li>
            </ul>
        </div>
  </div>

    <div id="banner">
        <img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" id="cliffPic"/> 
    </div>

  <div id="footer">
        <p>Placeholder Text</p>
    </div>

</div>

Answer 1

将您的html高度设置为100％html {height: 100%}

将框大小设置为边框* {box-sizing: border-box}这是为了确保元素上的填充不会添加到宽度/高度，而是成为宽度/高度的一部分。

将导航设置为20％高度#navigation {height: 20%}

将横幅设置为70％高度#banner {height: 70%}

将页脚设置为10％高度#footer {height: 10%}

您会注意到您的图片有所延伸，一种简单的解决方法是将其设置为该div中的背景并设置背景大小以涵盖#banner {background: <background>; background-size: cover}

基本上，您需要子元素的直接父元素具有设置的高度，或者子元素不会遵循百分比高度，是的，这需要一直遍历到第一个设置的高度祖先。在这种情况下，你已经正确设置了所有内容，只需要在html元素上保持100％的高度。

Answer 2

如果要在高度为100％时操纵它以隐藏滚动条，请在样式表中抛出html { overflow-y: hidden; }。请注意，如果超过100％，即使滚动也不会显示。因此，请确保使用正确的媒体查询来提供响应能力

Answer 3

这是一个固定的CSS：

1）您无法设置高度，因为html标签的样式不具有100％的宽度和高度。要控制元素的高度，请始终指定html标记（html文档的最外层容器）和body标记的高度为100％。

2）由于菜单的大小会在不同的屏幕尺寸中发生变化，因此您不能对任何元素使用固定的高度比。为了解决这个问题，我在你的代码中添加了css flexbox，这确保了菜单，横幅和页脚占用页面中的剩余空间而不会溢出。

    body,td,th {
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    }

    body, html {
        wdith: 100%;
        height: 100%;
        margin: 0px;
    }

    #container {
        wdith: 100%;
        height: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction:column;
        flex-direction: column;
    }

    #navigation {
        color: white;
        background-color: #292526;
        width: 99%;
        padding: 0.5% 0.5%;
    }

    #navigationLeft {
        width: 24.5%;
        display: inline-block;
        vertical-align: middle;
        font-size: 150%;
    }

    #navigationRight {
        width: 74.5%;
        display: inline-block;
        vertical-align: middle;
    }

    #navigation ul {
        float: right;
    }

    #navigation ul li {
        display: inline;
    }

    #navigation a {
        font-size: 100%;
        color: white;
        text-decoration: none;
    }   

    #banner {
        line-height: 0;-webkit-flex: 1; flex: 1;
    }

    #cliffPic {
        width: 100%;
    }

    #footer {
        color: white;
        background-color: #181818 ;
        width: 99%;
        padding: 0.5% 0.5%;
        text-align: center;
    }

CSS / HTML：无法更改div

3 个答案: