高度100％在CSS中不起作用

时间：2014-07-16 07:30:26

标签： html css layout

我正在学习CSS，在练习时我正在尝试复制this页面。

Here是我的屏幕截图。我希望左列（白色背景和蓝色边框底部）填充高度100％。整个中间部分分为三个框（div）。首先是一个＆＃34;列＆＃34; div包含两个div＆＃34; left_column＆＃34;和＆＃34; right_column＆＃34;。 ＆＃34;列的边界＆＃34; div可以看到黄色。我尝试设置＆＃34;身高：100％＆＃34; for＆＃34; left_column＆＃34;但它不起作用。谁能告诉我我做错了什么？

这是我的css文件：

#left_column {
    width: 65%;
    height: 100%;
    float: left;
    font-size: 80%;
    color: #414342;
    background-color: white;
    border-bottom: 1px solid blue;
    text-align: justify;
    overflow: hidden;
}

#left_column h2 {
    color: #3399FF;
    padding: 0 15px;
}

#left_column p {
    padding: 0 15px;
}

#right_column {
    width: 35%;
    float: right;
    font-size: 80%;
    background-color: #424D47;
    color: #8BC7D3;
}

#right_column h2,h3,h4 {
    color: #3399FF;
    padding: 0 15px;    
}

#right_column p {
    padding: 0 15px;
}

#columns {
    border: 1px solid yellow;
    overflow: hidden;
    margin: 0;
}

#columns p {
    font-family: "sans serif";
    line-height: 1.5em;
}

这是我的HTML文件：

<!DOCTYPE html>

<html>
<head>
    <title>Cloudy Water Sports</title>
    <link rel="stylesheet" href="main.css" />
</head>


<body>
    <div id="outer_frame">

        <div id="header">         
            <img src="images/header.jpg" alt="Cloudy Water"/>         
            <h1>CLOUDY WATER SPORTS</h1>     
        </div>

        <div id="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">ABOUT CWS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
        <div id="columns">
            <div id="left_column">
                <h2>Hello!</h2>
                <p>
                    Free Cloudy Water Sports template is yours to use.
                </p>
                <p>
                    Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.
                </p>

                <ul>
                    <li><a href="#">One for all and all for one.</a></li>
                    <li><a href="#">I never spend much time in School.</a></li>
                    <li><a href="#">Soaring through all the galaxies.</a></li>
                </ul>

                <p>
                    One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
                </p>

            </div>

            <div id="right_column"> 
                <h2>What's New?</h2>
                <h4>There's a voice</h4>

                <p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. More…</p>
                <h4>Every stop I make</h4>

                <p>Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on. More...</p>

                <h4>Hong Kong Phooey</h4>

                <p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. More…</p>

                <h3>Archive</h3>

                <ul>
                    <li><a href="#">One for all</a></li>
                    <li><a href="#">Can't stay for long</a></li>
                    <li><a href="#">Muskehounds</a></li>
                    <li><a href="#">Hong Kong Phooey</a></li>
                </ul>
            </div>
        </div>
        <div id="footer">
            <p>Copyright &copy; 2006 YOUR SITE NAME.</p>
            <p>Design by <a href="http://360guide.info">360guide.info</a></p>
        </div>
    </div>
</body>
</html>

4 个答案:

答案 0 :(得分：3)

右。

这种方式有效，你有一个没有高度的父元素。因此，任何进入父母的孩子都不能拥有百分比高度，因为：

20% of nothing = nothing
100% of nothing = nothing

如果孩子有内容，则默认为内容的大小。

如果您的父级高度为px：

20% of 100px = 20px
100% of 100px = 100px

这就是它的运作方式。

您的代码的解决方案，因为它的右侧列更大，我们可以使用display：table;这将允许我们使单元格的高度相等（无论高度越大）。

更改CSS： 

#columns {
    display: table;
    border: 1px solid yellow;
    overflow: hidden;
    margin: 0;
    height: 800px;
}
#left_column {
    width: 65%;
    height: 100%;
    display: table-cell;
    font-size: 80%;
    color: #414342;
    background-color: white;
    border-bottom: 1px solid red;
    text-align: justify;
    overflow: hidden;
}
#right_column {
    display: table-cell;
    width: 35%;
    font-size: 80%;
    background-color: #424D47;
    color: #8BC7D3;
}

DEMO

任何问题随时都可以问。

答案 1 :(得分：1)

我建议使用相等高度列CODEPEN

的选项模拟 
<body>

<div class="wrapper">

    <header class="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header><!-- .header-->

    <div class="middle">

        <div class="container">
            <main class="content">
                <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
<a href="#" class="expand">Expand column</a>            </main><!-- .content -->
        </div><!-- .container-->

        <aside class="right-sidebar">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
<a href="#" class="expand">Expand column</a>        </aside><!-- .right-sidebar -->

    </div><!-- .middle-->

    <footer class="footer">
        <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
    </footer><!-- .footer -->

</div><!-- .wrapper -->

</body>


body {
    font: 12px/18px Arial, sans-serif;
    width: 100%;
}
/* Begin of styles for the demo (you can remove them) */
a.expand {
    width: 90px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demo */
.wrapper {
    width: 960px;
    margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
    height: 150px;
    background: #FFE680;
}


/* Middle
-----------------------------------------------------------------------------*/
.middle {
    border-right: 250px solid #FFACAA;
    position: relative;
}
.middle:after {
    display: table;
    clear: both;
    content: '';
}
.container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}
.content {
    padding: 0 20px;
}


/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
    float: right;
    margin-right: -250px;
    width: 250px;
    position: relative;
    background: #FFACAA;
}


/* Footer
-----------------------------------------------------------------------------*/
.footer {
    height: 100px;
    background: #BFF08E;
}

答案 2 :(得分：1)

试试这段代码：

#columns{
    position:relative;
    background-color:#fff;
}
#left_column{
     width: 65%;
    float: left;
    font-size: 80%;
    color: #414342;
    text-align: justify;
    position:relative;
    z-index:1;
}
#right_column {
    width: 35%;
    float: right;
    font-size: 80%;
    background-color: #424D47;
    color: #8BC7D3;
    position:relative;
    z-index:1;
}
.right_dummy{
    position:absolute;
    width: 35%;
    height:100%;
    background-color: #424D47;
    z-index:0'
    right:0;
    top:0;
}


  .clearB{
     clear:both;
   }

HTML：

<div id="columns">
   <div id="left_columns">TEXT HERE.....</div>
   <div id="right_columns">TEXT HERE.....</div>
   <div class="right_dummy"></div>
   <div class="clearB"></div>
</div>

答案 3 :(得分：0)

添加此css＆＃39; s：

#columns, #outer_frame, html, body, form {
height:100%;

}

对于身高：100％正常工作所有容器父母也必须将身高设置为100％

相关问题
最新问题