我正在嘗試使用 Bootstrap 4 創建一個具有頁眉、頁腳和主要內容的頁面。主要內容應填充頁眉下方的空間，頁腳應位于其下方。我嘗試通過在主要內容上設置 100vh 高度來做到這一點，這可行，但是當我插入圖像時，它與頁腳重疊。我哪里錯了？為什么圖像沒有調整大?。?content-header { background: red; color: white;}#content-main { background: blue; color: white; height: 100vh;}#content-header { background: red; color: white;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><div id="app" class="h-100"> <div id="content" class="d-flex flex-column"> <nav id="content-header" class="p-4"> <div class="navContent d-flex justify-content-between"> Navbar </div> </nav> <main id="content-main" class="flex-grow-1 p-5"> Main Content <img class="img-fluid" src="https://placeimg.com/1000/1000/any"> </main> <div id="footer" class="p-4"> Footer Content </div> </div></div>
4 回答
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
添加min-height插入的height
#content-main {
background: blue;
color: white;
min-height: 100vh;
}
#content-header {
background: red;
color: white;
}
#content-main {
background: blue;
color: white;
min-height: 100vh;
}
#content-header {
background: red;
color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
<div id="content" class="d-flex flex-column">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between">
Navbar
</div>
</nav>
<main id="content-main" class="flex-grow-1 p-5">
Main Content
<img class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4">
Footer Content
</div>
</div>
</div>
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
您希望整個布局的高度為 100%，而不僅僅是#content-main.
因此，您要在 上設置min-height:100vh( ) 。然后，將允許 main 填充 nav 和 footer 之間的高度：min-vh-100#contentflex-grow-1
<div id="app">
<div id="content" class="d-flex flex-column min-vh-100">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between"> Navbar </div>
</nav>
<main id="content-main" class="flex-grow-1 p-5 overflow-auto">
Main Content
<img class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4"> Footer Content </div>
</div>
</div>
https://codeply.com/p/gnLCSZG9gy
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
試試這個代碼。我向圖像添加了 max-width: 100% 和 height: auto
#content-header {
background:red;
color:white;
}
#content-main {
background:blue;
color:white;
height:100vh;
}
#content-header {
background:red;
color:white;
}
#background-img{
max-width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
<div id="content" class="d-flex flex-column">
<nav id="content-header" class="p-4">
<div class="navContent d-flex justify-content-between">
Navbar
</div>
</nav>
<main id="content-main" class="flex-grow-1 p-5">
Main Content
<img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">
</main>
<div id="footer" class="p-4">
Footer Content
</div>
</div>
</div>
慕蓋茨4494581
TA貢獻1850條經驗 獲得超11個贊
你的問題是對的。因為您設置了主要內容高度 100vh，但如果您觀察到圖像尺寸大于屏幕高度。您的屏幕尺寸為 700 像素到 800 像素，但圖像尺寸為 1000 像素。所以你的圖像與頁腳重疊。
- 4 回答
- 0 關注
- 256 瀏覽
添加回答
舉報
0/150
提交
取消