老师，你看下我的代码。哪里还可以进行改进。

这里我设置了nav,content，以及footer分别为10%，80%，10%，可是为什么网页整体仍然超出了我们能看到的窗口区域呢？还有就是那里可以改进，烦请老师指点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}

.nav {
width: 100%;
background-color: black;
overflow: hidden;
height: 10%;
}

.logo {
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-left: 40px;
}

img {
vertical-align: middle;
float: left
}

.nav-list {

overflow: hidden;
float: right;

}

.nav-list ul {
float: left;
margin-right: 20px;
}

.nav-list ul li {
float: left;
list-style: none;
color: white;
text-align: center;
margin-right: 20px;
font-size: 20px;
}

a {
color: white;
text-decoration: none;
margin-right: 20px;
height: 100px;
line-height: 100px;
display: block;
}

/*注意这里是内容区域*/
.content {
background: cadetblue;
width: 100%;
height: 80%;
/*height: 400px;*/
overflow: hidden;
}

.left {
width: 60%;
float: left;
height: 400px;
}

ul {
list-style: none;
}

.content1 {
padding-left: 140px;
padding-top: 40px;
width: 400px;
margin: 0 auto;
}

.right {
margin-top: 30px;
float: right;
width: 40%;
height: 430px;
}

.content1 ul li {
margin-top: 20px;
font: 12px "微软雅黑";
}

.content1 span {
background: hotpink;
display: inline-block;
margin-right: 10px;
}

.content1 p {
font-size: 16px;
font-family: "微软雅黑";
}

table th {
text-align: left;
font-size: 16px;
font-weight: normal;
}

table tr {
font-size: 12px;
}

.footer {
width: 100%;
height: 10%;
overflow: hidden;
background: black;
text-align: center;
}

.footer span {
display: inline-block;
height: 20%;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="图片"></div>
<div class="nav-list">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">笔记</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端开发</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<div class="content1">
<p>课程介绍</p>
<ul>
<li><span>职业路径</span>动态网页开发</li>
<li><span>职业路径</span>ANDROID页面</li>
<li><span>职业路径</span>iOS</li>
<li><span>职业路径</span>PHP</li>
<li><span>职业路径</span>Java</li>
</ul>
</div>
</div>
<div class="right">

<table border="0" cellspacing="14">
<th colspan="3">相关课程</th>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JAVAscript</td>
</tr>
<tr>
<td>html5</td>
<td>css3</td>
<td>jquery</td>
</tr>
<tr>
<td colspan="2">移动端基础</td>
<td>移动端开发</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="footer">
<span><a href="#">网站首页</a></span>
<span><a href="#">企业合作</a></span>
<span><a href="#">人才招聘</a></span>
<span><a href="#">联系我们</a></span>
<span><a href="#">常见问题</a></span>
<span><a href="#">友情链接</a></span>
</div>
</div>
</body>
</html>

shine62 2019-02-28

源自：CSS网页布局基础 2-10 编程练习

收起

6回答

好帮手慕夭夭回答被采纳获得+3积分 2019-03-01 18:33:27

你好同学 , 理解的没错 . 固定定位参照的永远是窗口 , 给container设置宽高100%的意思是占据body的100% .不过这里本身body就没有设置宽高 ,它的高度就是被container内容撑开的 .所以container多高body就多高 ,再加上一个div默认的宽度就是相对浏览器100%显示 .所以你修改的代码中设置宽高100%是多余的哦 .

因为老师在之前回复中说过页面已经做得很不错了 , 所以还是建议同学不用在修改这个页面了哦 . 如果同学还有其他知识点理解的不好 , 可以重新提问新问题 ,老师会根据你哪部分知识掌握的不牢固有针对性的帮助你指导 . 这样也便于同学对问题的归纳和整理 .也建议同学多复习一下以前的视频 ,这样学过的知识才能加以巩固呢 .

祝学习愉快 ,望采纳 .

收起回答

提问者 shine62 2019-03-01 15:48:11

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

<style>

* {

margin: 0;

padding: 0;

}

.container{

width: 100%;

height: 100%;

position: relative;

}

.nav {

width: 100%;

background-color: black;

overflow: hidden;

}

.logo {

display: inline-block;

vertical-align: middle;

overflow: hidden;

margin-left: 40px;

}

img {

vertical-align: middle;

float: left

}

.nav-list {

overflow: hidden;

float: right;

}

.nav-list ul {

float: left;

margin-right: 20px;

}

.nav-list ul li {

float: left;

list-style: none;

color: white;

text-align: center;

margin-right: 20px;

font-size: 20px;

}

a {

color: white;

text-decoration: none;

margin-right: 20px;

height: 100px;

line-height: 100px;

display: block;

}

/*注意这里是内容区域*/

.content {

background: cadetblue;

width: 100%;

/*height: 400px;*/

overflow: hidden;

/* padding-bottom: 120px;*/

}

.left {

width: 40%;

float: left;

height: 400px;

}

ul {

list-style: none;

}

.content1 {

padding-left: 140px;

padding-top: 40px;

width: 400px;

margin: 0 auto;

}

.middle {

margin-top: 30px;

float: left;

width: 30%;

height: 430px;

}

.content1 ul li {

margin-top: 20px;

font: 12px "微软雅黑";

}

.content1 span {

background: hotpink;

display: inline-block;

margin-right: 10px;

}

.content1 p {

font-size: 16px;

font-family: "微软雅黑";

}

table th {

text-align: left;

font-size: 16px;

font-weight: normal;

}

table tr {

font-size: 12px;

}

.right{

width: 30%;

float: right;}

.right p{

font: bold 25px "微软雅黑";}

.right form input{

color: darkgrey;

height:30px;

display:block;

}

.footer {

width: 100%;

overflow: hidden;

background: black;

text-align: center;

position: fixed;

bottom: 0;

}

.footer span {

display: inline-block;

height: 100px;

line-height: 100px;

}

.right .submit{

width: 200px;

background: red;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li><span>职业路径</span>动态网页开发</li>

<li><span>职业路径</span>ANDROID页面</li>

</ul>

</div>

<tr>

<td>JAVAscript</td>

</tr>

<tr>

<td>jquery</td>

</tr>

<tr>

<td colspan="2">移动端基础</td>

<td>移动端开发</td>

</tr>

</table>

</div>

<form >

</form></div>

</div>

</div>

</body>

</html>

收起回答

好帮手慕夭夭 2019-03-01 10:36:30

你好同学 , 首先要纠正你在回复的时候一个问题 ,就是footer{position:fixed, bottom:0}属性与属性使用逗号是错误的 , 这样会导致样式解析无效 .

应该是使用分号隔开 :

从同学的描述来看 , 可能同学对固定定位和绝对定位的概念还理解的有一些问题 . 同学可以参考如下在理解一下 :

1.固定定位参照的是浏览器窗口定位 ,也就是说设置固定定位的元素 , 会永远在窗口的某一个位置 ,而不会随着页面固定而变化的 .

2.绝对定位 ,参照的是最近已定位的祖先元素 ,如果没有定位的祖先元素 ,默认参照整个页面也就是 ,html,body. 不过需要注意的是 , 由于浏览器自身用户代理的不同 ,有的会参照整个面板定位 .

所以绝对定位并不是参照浏览器窗口定位 , 也就是不会固定在窗口的某个位置不动 .

至于同学说的在网上查看的方法 ,都是需要具体情况具体分析的 . 像代码中尾部没有定位祖先元素了 , 所以参照的是一个面板 ,也就是你能看到的这一块区域 (要和窗口区域区分开 ).

你设置了bottom:0 之后 , 它会在面板的最底部 ,但是页面滚动的时候会跟随滚动 . 所以想要固定在窗口的最底部 , 就要使用fixed实现哦

希望能够解答你的疑惑 , 祝学习愉快 ,望采纳 .

收起回答

提问者 shine62 #1

明白了，谢谢老师呢。

2019-03-01 15:33:08
提问者 shine62 #2

好的。固定定位的fixed的参考标准永远是窗口吗，比如我给最外面的container设置了relative,那么footer的fixed仍然是窗口是不是呢？您看下我代码呢？这里我给container设置了高度和宽度为100%,就是说它占据body的全部，是这样理解的对吧。代码如上，这块确实有点懵。

2019-03-01 15:47:48

提问者 shine62 2019-02-28 19:43:11

使用position:aboslute,bottom:0;网上看到说要让content的padding-bottom(即内容区)距至少要大于footer的高度，懵逼了

收起回答

好帮手慕夭夭 2019-02-28 18:56:49

你好同学 , 这里都不需要设置高度百分比的 .同学的页面在老师这里显示的结构是很不错的 ,在大屏幕的浏览器下面都是可以显示在页面中 , 在小的电脑上可能显示不全 ,也是很正常的 ,如下

想要设置全屏显示可以设置如下,给他一级一级的父元素设置高度100% ,container的父元素也要设置高度 , 这样才能一级一级的参照父元素进行计算的

但是像同学描述的情况是很正常的 , 像视频中可能只是为了特定的一些布局等 . 而老师给出的是从实际开发角度上的建议 , 就像慕课网的网站 , 也是需要下拉才能浏览到底部的内容 . 所以老师在第一次回复中说的 ,在实际开发中 ,很少去这样设置 . 因为大部分都是这样的哦.

祝学习愉快 ,望采纳 .

收起回答

提问者 shine62 #1

好的，谢谢老师。我刚才想表达的意思其实是：如何把页脚固定在屏幕底端，刚刚做了一个小测试：发现给footer{position:fixed, bottom:0}可以实现无论是否有滚动条都可以将页脚固定在最低端；可是如果给页脚绝对定位的话，如果出现滚动条的话，页脚是不能固定在最底端的。页脚底部会有空白，如图所示，见上层楼：

2019-02-28 19:40:56

好帮手慕夭夭 2019-02-28 16:33:30

你好同学 , 因为高度需要参考父元素设置 , 而它们父元素的高度并没设置 ,所以子元素设置百分比的高度是没有用哦 .不过在实际开发中 ,很少给元素设置高度百分比 ,网页超出了浏览器窗口区域是很正常的 , 建议同学去掉设置的高度百分比 , 一般高度自己自适应就可以了. 结构上面实现的很不错 , 建议标题使用标题标签 ,如下两个标题使用h3标签嵌套更好哦

祝学习愉快 ,望采纳 .

收起回答

提问者 shine62 #1

所有的高度都不设置吗？我的意思是底部的footer不能完整的展示在整个网页上，必须要下拉，才能显示完？老师能帮忙修改下吗？这样说还是很笼统呢，我给父元素设置了container(最外面的容器）为100%呀。平时看老师上课的时候好像都是设置了高度呢了

2019-02-28 16:58:53