CSS基于布局

Question

哦，基于 table 的布局的黄金时代。难道我们不应该回到那里去搞砸语义吗？（我知道，我知道，...）

但是我有一个棘手的网站布局，如果我使用 table，它可以在几秒钟内完成，代码行也很少。两天来，我一直在努力用 divs 实现同样的目标。也许有人可以提供帮助。

这是我想要实现的布局： http://jsfiddle.net/reltek/13c6yfmh/

这是使用 table 的代码，简单易用：

<table border="1" width="100%">    
  <tr>
    <th rowspan="2" width="30%" valign="top">            
      <h2>Main Navigation</h2>
      <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
      <ul>
        <li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav 3</li>
      </ul>
    </th>
    <td valign="top">
      <h1>Main Content</h1>
      <p>Flexible, might get really long.</p>          
    </td>
  </tr>
  <tr>
    <td height="3em">      
      <h2>Footer</h2>
      <p>flexible height, should stay at the bottom of the page.</h2>
    </td>
  </tr>
</table>

我的基于 div 的 HTML 可以在这里找到：http://jsfiddle.net/reltek/48rmshen/

问题是：如果左栏比右栏长，右侧的页脚不会停留在底部。

感谢任何帮助，谢谢大家！

Answer 1

您可以使用 display:table，但不幸的是您不能使用 rowspan，因此您需要对 div 结构进行一些创意：

html, body {
    min-height:100%;
    padding:0;
    margin:0;
}
#wrapper {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
#left-column {
    width:30%;
    background:red;
}
#right-column {
    width:70%;
    height:100%;
}
#content, #header {
    height:100%;
}
#header {
    background-color:green;
}
#footer {
    background-color:blue;
}

<div id="wrapper">
    <div class="table">
        <div class="row">
            <div id="left-column" class="cell">
                 <h2>Main Navigation</h2>

                <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
                <ul>
                    <li>Nav 1</li>
                    <li>Nav 2</li>
                    <li>Nav 3</li>
                </ul>
            </div>
            <div id="right-column" class="cell">
                <div id="content" class="table">
                    <div id="header" class="row">
                        <div class="cell">
                             <h1>Main Content</h1>

                            <p>Flexible, might get really long.</p>
                        </div>
                    </div>
                    <div id="footer" class="row">
                        <div class="cell">
                             <h2>Footer</h2>

                            <p>flexible height, should stay at the bottom of the page.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Example Fiddle

Answer 2

这是 flexbox 的工作（旧浏览器的前缀和解决方法留作 reader 的练习）

body {
    display: flex;
}
nav {
    background: red;
}
.non-nav {
    display: flex;
    flex-direction: column;
}
main {
    background: green;
    flex-grow: 1;
}
footer {
    background: blue;
    flex-shrink: 1;
}

<nav>
     <h2>Main Navigation</h2>

    <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
    <ul>
        <li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav 3</li>
    </ul>
</nav>
<div class="non-nav">
    <main>
         <h1>Main Content</h1>

        <p>Flexible, might get really long.</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>end of text</p>
    </main>
    <footer>
         <h2>Footer</h2>

        <p>flexible height, should stay at the bottom of the page.</p>
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </footer>
</div>

Answer 3

为了与您的示例中的 display:table 保持一致，以下工作正常。这是 jsfiddle http://jsfiddle.net/r4pg8p25/2/

您可以添加和删除空白段落，并看到它与左侧面板同步扩展和收缩。

希望这对您有所帮助，蒂姆

<html>
    <header>
        <style>  

            html, body { text-align: justify; height: 100%; }

            .layout { display: table;  height: 100%;}
            .layout .columns-container { display: table-row;  height: 100%;}
            .layout .columns-container .column { display: table-cell;  height: 100%;}
            .layout .top { display: table-row;  height: 100%;}
            .layout .bottom { display: table-row;  height: 100%;}
            .layout .top .main{ display: table-cell;  height: 100%;}
            .layout .top .footer{ display: table-cell;  height: 100%;}

            .one-third { width:33%; float: left;  height: 100%;}
            .two-thirds { width:66%; height:100%; float: right; }

            .main-footer { height: 100%; }

            .nav { background: red; padding: 20px; }
            .main { background: green; padding: 20px;  height: 100%; }
            .footer { background: brown; padding: 20px; height: 150px; }

        </style>
    </header>
    <body>
        <div class="layout">
            <div class="columns-container">
                <div class="column one-third">
                    <div class='nav'>
                        <h2>Main Navigation</h2>
                        <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
                         padding-bottom:100%; margin-bottom:-100%;
                        <ul>
                            <li>Nav 1</li>
                            <li>Nav 2</li>
                            <li>Nav 3</li>
                        </ul>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>end</p>
                    </div>
                </div>
                <div class="column two-thirds">
                    <div class="layout main-footer">
                        <div class='top'>
                            <div class="main" role="main">
                                <h1>Main Content</h1>
                                <p>Flexible, might get really long.</p>
                                <p>end of text</p> 
                            </div>
                        </div>

                        <div class='bottom'>
                            <div class="footer">
                                <section id="colophon" class="site-info" role="contentinfo">
                                    <h2>Footer</h2>
                                    <p>flexible height, should stay at the bottom of the page.</p>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>
</html>

CSS基于布局

CSS-based layout

html

css

layout

html-table