html/css 中的全屏寬度 header
[英]Full screen width header in html/css
問題描述
我知道這是一個常見問題，但我無法讓我的 header 與我的屏幕尺寸相同。
我已經嘗試將 header 包裝到另一個 div 中並設置width: 100% 。 這沒有幫助。
謝謝你的幫助！
body { font-family: 'avenirregular'; padding: 0; margin: 0; background-color: #f4f4f4; width: 100% } /* Global */.container { width: 85%; margin: auto; overflow: hidden; } /* Header **/ header { background: #16205E; color: #ffffff; padding-top: 30px; min-height: 7.5vh; border-bottom: #2B8AFF 3px solid; display: table-cell; vertical-align: middle; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } header li { float: left; display: inline; vertical-align: top; padding: 0 20px 0 20px; } header #branding { width: 20%; float: left; padding-top: 0px; padding-bottom: 20px; } header #home img { width: 100%; height: 100%; } header nav { float: right; margin-top: 20px; }
<header> <div class="container"> <div id="branding"> <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a> </div> <nav> <ul> <li><a href="page1.html">Content1</a></li> <li><a href="page2.html">Content2</a></li> <li><a href="page3.html">Content3</a></li> </ul> </nav> </div> </header>
3 個解決方案
解決方案1
1 已采納 2019-10-02 11:28:42
只需從header中刪除display:table-cell
body{ font-family: 'avenirregular'; padding:0; margin:0; background-color:#f4f4f4; width:100% } /* Global */.container{ width:85%; margin:auto; overflow:hidden; } /* Header **/ header{ background:#16205E; color:#ffffff; padding-top:30px; min-height:7.5vh; border-bottom:#2B8AFF 3px solid; } header a{ color:#ffffff; text-decoration:none; text-transform: uppercase; font-size:16px; } header li{ float:left; display:inline; vertical-align:top; padding: 0 20px 0 20px; } header #branding{ width:20%; float:left; padding-top:0px; padding-bottom:20px; } header #home img{ width:100%; height:100%; } header nav{ float:right; margin-top:20px; }
<body> <header> <div class="container"> <div id="branding"> <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a> </div> <nav> <ul> <li><a href="page1.html">Content1</a></li> <li><a href="page2.html">Content2</a></li> <li><a href="page3.html">Content3</a></li> </ul> </nav> </div> </header> </body>解決方案2
1 2019-10-02 12:01:51
我為自己設計了一個很好的約定供您遵循，並且效果很好。 往下看。
旁注：我會刪除 UL 列表。 只需直接使用鏈接，您就可以使用 CSS 來設置菜單鏈接的樣式。 它會讓你的生活更輕松。
每個頁面都必須有一個包裝器 div 來包裝您的所有 html。
然后在您的包裝器中，您可以管理您的內容。 但是您的包裝器必須始終具有 100% 的寬度，並且您的 box-width 永遠不會是全寬，名稱說明了它的用途。 此標准允許您控制頁面的全寬內容，例如橫幅或頁面上任何級別的全寬內容。 然后，如果您有類似文本內容的內容，您可以使用框寬度樣式 class 將內容居中。
我為您留下代碼的方式也將考慮到移動設備，響應式設計很重要。 但是您可以根據自己的感覺對其進行優化。 :)
要使所有元素內聯，請根據最適合您的方式研究這些功能。
https://www.w3schools.com/css/css_inline-block.asp- >inline-block
和
https://www.w3schools.com/css/css_float.asp- >float
然后將適當的樣式應用於周圍 div 內的 div 元素。
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
@media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
@media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
解決方案3
0 2019-10-02 11:27:45
header{
display:inline-block;
width:100%;
}
你有 display: table-cell; 這意味着它像表格單元格一樣...並且表格單元格與內容相關。 您可以刪除它，然后您的 header 將顯示：塊，這意味着它自動 100%。 回想起來，我的答案不如這里的另一個好……所以只需刪除 display:table-cell。
標頭不是全角-HTML / CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.