所以我正在尝试使用旁边的导航面板创建一个页面,该页面将页面的整个长度拉伸到页脚,如下所示:
但令人讨厌的是,这是我能得到的尽可能接近,我无法弄清楚如何做到这一点!
我不是试图将屏幕上的页脚或页脚元素固定在屏幕上,我希望在向下滚动时显示页脚。
实际值:
这是我的代码:
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;
}
感谢任何帮助。
答案 0 :(得分:1)
您可以使用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;}
&#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;
这可以通过将aside
和#content
包装在公共父#main
中来实现。当孩子设置为display: table; width:100%
(table-cells
)
display:table-cells
样式
简而言之,HTML结构:
标题+(#main&gt;搁置+ #content)+页脚