Header固定高度、宽度自适应及垂直居中问题求助

疑问列表 #

• 为何我的header无法维持固定高度并实现宽度自适应？
• 如何保证header在内容变更时垂直高度保持一致？
• 如何让「Minhas Reservas」元素垂直居中？
• 不理解absolute、relative等position属性的用法

原始代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@@@</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Dependencia BS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body style="background-color:#e6e6e6;">
    <div class="navbar">
        <div class="container-fluid">
            <div class="header-left">
                <img id="logo" src="@@" alt="" width="154" height="32">
            </div>
            <div class="header-right">
                <a class="nav-item dropdown text-white btn-lg" id="navdrop" role="button" data-toggle="dropdown" data-hoover="dropdown" style="font-family">
                Minhas Reservas
                </a>
            </div>
        </div> 
    </div>
</body>
</html>

CSS代码 #

.header-right{

}
nav {
    background: rgb(45, 123, 212)
    
}
iframe{
    position: ;
}
.navbar {
    position:absolute;
    overflow:hidden;
    background: rgb(0,138,193);
    background: linear-gradient(180deg, rgba(0,138,193,1) 0%, rgba(0,40,135,1) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.nav-item::after{content:'';display:block;width:0px;height:2px;background:#ffffff;transition: 0.2s;}
.nav-item:hover::after{width:100%;}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#fec400;}
.nav-link{padding:15px 5px;transition:0.2s;}
.dropdown-item.active, .dropdown-item:active{color:#212529;}
.dropdown-item:focus, .dropdown-item:hover{background:#ffffff;}

#box{
    background-color: rgba(16, 106, 180, 0.699);
    border: 1px salmon;
    width: 900px;
    height: 500px;
    position:absolute;
    margin-top: 40px;
    
}
.navdrop{
    margin-top: 57;
}

问题解答及修改方案 #

1. 解决header固定高度+宽度自适应，内容变更时高度一致 #

你的.navbar用了position:absolute，这个属性会让元素脱离文档流，宽度默认收缩为内容宽度，且未设置固定高度，导致高度随内容变化。修改方案如下：

.navbar {
    /* 若要固定顶部可改用position:fixed; top:0; 同时给body加padding-top:80px; 避免内容被遮挡 */
    position: relative;
    width: 100%; /* 强制宽度自适应父容器 */
    overflow:hidden;
    background: rgb(0,138,193);
    background: linear-gradient(180deg, rgba(0,138,193,1) 0%, rgba(0,40,135,1) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 80px; /* 设置固定高度 */
    display: flex;
    align-items: center; /* 让内部容器垂直居中，确保内容变更时高度不变 */
}

.container-fluid {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 左右元素自动分布在两端 */
    align-items: center; /* 内部元素垂直居中 */
    padding: 0 20px; /* 增加左右内边距，避免内容贴边 */
}

修改后navbar宽度占满屏幕，高度固定为80px，即使内部内容变化，高度也不会改变。

2. 让「Minhas Reservas」垂直居中 #

上述给.container-fluid设置的display:flex; align-items:center;已经能让右侧元素垂直居中，再给.header-right补充对齐样式，确保元素本身完全居中：

.header-right {
    display: flex;
    align-items: center;
}

3. position属性用法说明 #

• static：默认值，元素按正常文档流排列，top/left/right/bottom属性无效。
• relative：元素相对于自身原始位置定位，不脱离文档流，设置偏移属性后，原位置会被保留。
• absolute：元素脱离文档流，相对于最近的非static定位的父元素定位；若没有这样的父元素，则相对于浏览器窗口定位。元素宽度默认收缩为内容宽度，不占据文档流空间。
• fixed：元素脱离文档流，相对于浏览器窗口定位，滚动页面时位置固定不变。
• sticky：结合relative和fixed特性，滚动到指定位置前保持relative，超过后变为fixed。

你代码里.navbar用了absolute，这就是header无法自适应宽度的核心原因。如果需要header固定在顶部，推荐用position:fixed; top:0; width:100%;，同时给body添加padding-top:80px;（与navbar高度一致）。

内容的提问来源于stack exchange，提问作者Naila Malukona gamer