Question

所以我正在尝试使用旁边的导航面板创建一个页面，该页面将页面的整个长度拉伸到页脚，如下所示：

但令人讨厌的是，这是我能得到的尽可能接近，我无法弄清楚如何做到这一点！

我不是试图将屏幕上的页脚或页脚元素固定在屏幕上，我希望在向下滚动时显示页脚。

实际值：

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>My Website</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
          <div id="header">
                <img src="images/logo.jpg" alt="Logo" />
            <h1>Title</h1>
          </div>
        </header>
        <aside>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 2</li>
            </ul>
        </aside>
        <div id="content">
            <nav>
                <a href="pages/.html">Home</a>
            </nav>
            <article>
                Lorem ipsum dolor sit amet, 
                consectetur adipiscing elit. 
                Aliquam ac tortor id leo facilisis 
                ultrices. In ac turpis non sem 
                pellentesque porttitor. Ut eu elit 
                non velit pretium posuere non vel 
                arcu. Class aptent taciti sociosqu 
                ad litora torquent per conubia nostra, 
                per inceptos himenaeos. Sed posuere 
                lacus tellus, vel tristique felis 
                condimentum sit amet. Aliquam convallis 
                pretium arcu, eu pretium nunc lacinia a. 
                In porttitor cursus mauris id facilisis. 
                Proin vitae placerat leo. Vestibulum 
                accumsan venenatis neque, viverra 
                fringilla lectus pellentesque eu. Fusce 
                convallis nulla eu enim sagittis, ut 
                dignissim turpis commodo. Morbi blandit 
                risus mi, in aliquam sem tincidunt dapibus. 
                Suspendisse quis diam tincidunt, accumsan 
                dui facilisis, semper erat. Sed venenatis 
                rutrum lacus, ac vehicula mi mattis sed.
            </article>
            <article>
                Lorem ipsum dolor sit amet, 
                consectetur adipiscing elit. 
                Aliquam ac tortor id leo facilisis 
                ultrices. In ac turpis non sem 
                pellentesque porttitor. Ut eu elit 
                non velit pretium posuere non vel 
                arcu. Class aptent taciti sociosqu 
                ad litora torquent per conubia nostra, 
                per inceptos himenaeos. Sed posuere 
                lacus tellus, vel tristique felis 
                condimentum sit amet. Aliquam convallis 
                pretium arcu, eu pretium nunc lacinia a. 
                In porttitor cursus mauris id facilisis. 
                Proin vitae placerat leo. Vestibulum 
                accumsan venenatis neque, viverra 
                fringilla lectus pellentesque eu. Fusce 
                convallis nulla eu enim sagittis, ut 
                dignissim turpis commodo. Morbi blandit 
                risus mi, in aliquam sem tincidunt dapibus. 
                Suspendisse quis diam tincidunt, accumsan 
                dui facilisis, semper erat. Sed venenatis 
                rutrum lacus, ac vehicula mi mattis sed.
            </article>
            <footer>
                <a href="#top">Back to Top</a>
            </footer>
        </div>
</body>
</html>

CSS：

html, body {
    height: 100%;
}

body {
    padding-left: 50px;
    padding-right: 50px;
    min-width: 700px;
}

header {
    color: #000;
    background-color: #66F;
}

aside {
    float: left;
    width: 140px;
    height: 100%;
    color: #000;
    background-color: #63F;
}

nav {
    color: #000;
    background-color: #CCC;
    padding-left:160px;
}

article {
    color: #03F;
    background-color: #69C;
    text-align: left;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 160px;
}

footer {
    text-align: center;
    background-color: #888;
}

#header {
    overflow: auto;
}

#header img {
    float: left;
    width: 140px;
    height: 140px;
}

#header h1 {
    text-align: left;
    padding-left:160px;
}

感谢任何帮助。

Answer 1

您可以使用CSS表格布局来实现所需的结果。

基本演示：

＆＃13;

/* table layout */

#main {display: table; width: 100%;}

aside, #content {display: table-cell;}

/* just for demo styling */

* {margin: 0; padding:0; box-sizing:border-box;}

header, footer {background:lightblue;  padding: 1em;}

#content {padding:1em; background:lavender;}

aside {width: 140px; padding:1em; background:lightpink;}

p {margin-bottom:1em;}

＆＃13;

<header>Header</header>

<div id="main">

  <aside>Aside Nav</aside>
  
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quo autem cumque, fugit doloremque, architecto velit ducimus aspernatur labore? Suscipit dolorem nemo dolore quae blanditiis distinctio ullam reiciendis, deserunt fuga.</p>
    <p>Iusto facere aperiam natus id possimus porro minima dolor vel? Quo sequi ullam vero voluptas. Inventore cum nostrum quaerat nemo quia, nesciunt corrupti, officiis, ut totam vitae, eius reprehenderit saepe?</p>
    <p>Fugiat nobis laboriosam quis, explicabo, architecto doloremque dolores. Quas at delectus cum porro ullam quae. Nisi aspernatur esse voluptatem accusantium obcaecati quaerat natus placeat, voluptatum ratione fugit, cumque, est quis.</p>
  </div>
  
</div>

<footer>Footer</footer>

＆＃13;

jsFiddle

这可以通过将aside和#content包装在公共父#main中来实现。当孩子设置为display: table; width:100%（table-cells）

时，家长会获得display:table-cells样式

简而言之，HTML结构：

标题+（#main＆gt;搁置+ #content）+页脚

除了导航高度到页脚，不在固定位置

1 个答案: