gpt4 book ai didi

css - 在不使用任何库和框架的情况下,顶部导航栏和页脚位置不会弄乱页面的其余部分

转载 作者:行者123 更新时间:2023-11-28 00:14:25 25 4
gpt4 key购买 nike

我总是遇到与顶部导航栏和页脚相同的问题。我总是无法将它们放在正确的位置。

顶部导航: Logo 应位于左上角,其余部分向右对齐

页脚:即使我按照建议为页面上的所有 div 创建了主容器,它也位于页面中间。

问题附带的 CSS 和图片

html,body {
margin:0;
padding:0;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}

header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}

.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}

.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}


.topnav a.active {
color: #4CAF50;
}

.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}

section {
margin-left: 25%;
margin-right: 12%;
position: absolute;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}



#footer{
position:absolute;
bottom:0;
width:100%;
height:60px;
color: #696969;
}

footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}

.socialnets{
text-align:center;
padding: 10px 10px;
}


.newsletter{
text-align:right;
padding: 10px 10px;
}

enter image description here

最佳答案

在 body 上设置 100% 高度本质上是从视口(viewport)继承的。这就是为什么页脚固定在视口(viewport)像素值的底部,如果您滚动,它不会“粘住”。

我猜这就是你想要的?..

我不知道你的 html 是什么结构,所以这只是你的 css。

我建议查看 flexbox 并检查使用 flex 的粘性页脚方法。 https://codepen.io/devatrox/pen/wztlx

html,body {
margin:0;
padding:0;
min-height:100vh;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}

header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}

.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}

.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}


.topnav a.active {
color: #4CAF50;
}

.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
overflow: auto;
background-color: red;
height: calc(100% - 121px);
}


.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}

section {
margin-left: 25%;
margin-right: 12%;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}



#footer{
position:relative;
bottom:0;
width:100%;
height:60px;
color: #696969;
background-color:blue;
}

footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}

.socialnets{
text-align:center;
padding: 10px 10px;
}


.newsletter{
text-align:right;
padding: 10px 10px;
}
<div id="mainContainer"><header><div class="topnav">top</div></header><div class="sidebar">side</div><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section>
<div id="footer">FOOTER</footer>

关于css - 在不使用任何库和框架的情况下,顶部导航栏和页脚位置不会弄乱页面的其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55198953/

25 4 0