html - 将导航高度放在页脚，而不是固定位置-6ren

html - 将导航高度放在页脚，而不是固定位置

转载作者：行者123 更新时间：2023-11-28 01:16:04

所以我试图创建一个带有旁边导航面板的页面，该面板将页面的整个长度延伸到页脚，如下所示:

但令人恼火的是，这已经是我所能得到的最接近的结果了，我不知道该怎么做!

我并不想将 aside 或 footer 元素固定在屏幕上，我希望在向下滚动时显示页脚。

实际:

这是我的代码:

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

感谢任何帮助。

最佳答案

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

基本演示:

/* 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;}

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

jsFiddle

这通过将 aside 和 #content 包装在一个公共(public)父级 #main 中来实现。父级获取 display: table; width:100% 样式，而子项设置为 table-cells (display:table-cells)

HTML 结构简述: