目前我遇到了页面布局及其CSS规则的问题.
我有一个标题(div)占据页面宽度的100％,但是高25px并且位于页面的顶部;和一个应该占据剩余空间高度的导航栏(跨度)(我们稍后会到达),宽度为180px,位于页面的左侧.页面的其余部分应该是内容所在的位置.
我的问题如下：
>因为我希望标题和导航栏都固定在它们的位置(这样滚动只发生在内容div上)我尝试添加position：fixed;他们的规则.然而,这导致导航栏将其位置重置到页面的左上角,因此与标题重叠,因此我将导航栏从顶部移动了27px(标题为其边框的h.)因为我不知道如何让导航栏占据剩余的高度空间,我暂时给它高达97.2％.这显然很糟糕,这就是我在这里的原因.那么,我怎样才能使这个跨度自动占用剩余空间？
>完成上述操作后,我意识到内容div移动到页面的左上角.我不知道为什么会这样.我尝试以一种类似的方式将内容div移动一个固定的数量来解决这个问题,这又是坏事.所以我基本上和以前一样有问题,除了这次是宽度和高度.
我尝试搜索并查看了向其他用户建议的一些解决方案(this thread中另一位用户建议的this solution here引起了更多的兴趣,但是新的我不太明白我是如何调整它还包括旁边的一个垂直列内容div因此恢复了我对代码的尝试更改并尝试坚持我理解的内容.
所以,这是HTML代码.标题中的图像应该不是问题,并且唯一的脚本每隔100毫秒就会不断刷新页面. (注意：导航栏目前是空的,但它应该在里面有一个“箭头菜单”)
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="preview.js"></script>
</head>
<body>
<div id="header">
<span id="avatar">
<img id="avatarImage" src="assets/defaultProfile.png" width="20" height="20">
</span>
AnimeDB
<span id="lightText">Dev Mode</span>
</div>
<span id="navbar"></span>
<div id="content">
Content
</div>
</body>
</html>
这是CSS,但我删除了对navbar和内容的更改.在你继续阅读之前,我想指出我还没有完全理解我在这里使用过的一些属性(主要是浮动和显示.我对两者的工作方式都有一个非常粗略的了解).
html,body {
height: 100%;
margin: 0;
padding: 0;
}
body{
background-color: #D3D3D3;
}
#header {
display: inline-block;
color: white;
background-color: #41B1E1;
width: 100%;
height: 25px;
font-family: 'Segoe UI',Arial,sans-serif;
font-weight: bold;
font-size: 17px;
border-bottom: 2px solid white;
/*Box-shadow: 0 3px 5px #9f9f9f;*/
}
#avatar {
float: left;
background-color: #0071BC;
color: white;
width: 30px;
height: 25px;
padding: 0 5px 0 5px;
border-right: 3px solid #71C5E9;
margin-right: 5px;
}
#avatarImage {
margin: 2px 5px;
}
#lightText {
color: rgba(255,255,0.5);
}
#navbar {
float: left;
width: 180px;
height: 97.2%;
background-color: #A5A5A5;
border-right: 2px solid white;
}
#content {
background-color: greenyellow;
}
我希望我已经足够清楚地解释我的问题和思考过程,并且我可以从这次经历中学到新东西.
解决方法
> body-wrapper：包含header和content-wrapper
> content-wrapper：包含导航栏和内容
包装器有填充,设置为100％宽度,100％高度和盒子大小：border-Box;,这非常重要.通常你会得到100％的填充.使用盒子大小：边框;元素将保持100％.
body,html {
height: 100%;
}
body {
background-color: #eee;
margin: 0;
}
#body-wrapper {
position: relative;
height: 100%;
padding-top: 50px;
background-color: orange
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
padding: 15px 0 0 120px;
background-color: #bababa;
}
img {
position: absolute;
top: 0;
left: 0;
}
#content-wrapper {
position: relative;
height: 100%;
width: 100%;
padding-left: 100px;
}
#navbar {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100px;
height: 100%;
padding: 10px;
color: #fff;
background-color: #333
}
#content {
position: relative;
width: 100%;
height: 100%;
padding: 1px 20px;
overflow-y: auto;
}
.border-Box {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
<div id="body-wrapper" class="border-Box"> <div id="header" class="border-Box"> <img src="http://placehold.it/100x50">AnimeDB </div> <div id="content-wrapper" class="border-Box"> <div id="navbar" class="border-Box">navbar</div> <div id="content" class="border-Box"> <p> Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </div> </div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
