使固定標題的寬度與容器div相同大小

header元素位於容器div內。我將header設置爲fixed。它導致2個問題：使固定標題的寬度與容器div相同大小

寬度header溢出了div元素的寬度。它應該匹配div。
其他元素nav和article在我修復header時不可見。

這是現在如何出現：

這是我希望它出現：

這裏是我的代碼片段：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 
header{ 
 
    position:fixed; 
 
    width:100%; 
 
    right:0px; 
 
} 
 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
\t \t \t 
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

來源

2016-09-19 Mitali

你不能有一個非固定高度的固定頭，所以你可以給頭部固定高度？ ...否則你需要一個不同的解決方案，如果你希望標題保持不變，並且內容可見和可滾動......那麼該走哪條路？ – LGSon

我想都;頭部被固定，並且內容（物品）如果其大內容可見並且可滾動。 – Mitali

你在說什麼？是否需要修改標題的高度 – Mitali

這給我造成你想：

header { 
/* Everything else is same as your code*/ 
position: relative; 
} 
header,footer { 
/* Everything else is same as your code*/ 
padding: 1em 0; 
}

您設置的div寬度100％，頭寬其父100％，然後設置填充左，1EM權（填充：1EM - >其填充從所有4邊，填充：1em 0 - >頂部&底部1em，左邊&右邊0）。
你爲什麼設置固定？你需要頭部粘在頂部？

div.container { 
    width: 100%; 
    border: 1px solid gray; 
} 
header{ 
    position:fixed; 
    width:100%; 
} 
header, footer { 
    /*padding: 1em 0;*/ 
    color: white; 
    background-color: black; 
    clear: left; 
    text-align: center; 
} 
header h1 { 
    line-height: 2em; 
    font-size: 2em; 
} 
nav { 
    float: left; 
    max-width: 160px; 
    margin: 0; 
    padding: 1em; 
    margin-top: 6em; 
} 
nav ul { 
    list-style-type: none; 
    padding: 0; 
} 
nav ul a { 
    text-decoration: none; 
} 
article { 
    margin-left: 170px; 
    border-left: 1px solid gray; 
    padding: 1em; 
    overflow: hidden; 
    margin-top: 6em; 
}

來源

2016-09-19 18:06:06 jare25

但我想要修改頭部並將其他元素固定爲可見 – Mitali

是的，即使窗口正在滾動，我也想將頭部貼到頂部 – Mitali

@Mitali可以試試這個。我編輯了我的答案。試着不要觸摸HTML，只有CSS。 – jare25

沒什麼只是把容器div文章之前。如果你想改變最小寬度的容器寬度：100％。但是如果你需要這篇文章的全部窗口大小。高度：100vh;只需要添加你已經添加的.article類。只要運行它

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    min-width: 100%; 
 
    
 
    border: 1px solid gray; 
 
} 
 
header{ 
 
    postion:fixed; 
 
    width:100%; 
 
    right:0px; 
 
} 
 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
\t \t \t 
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    height:100vh; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 
    
 
<div class="container"> 
 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in 
 
the United Kingdom, with a metropolitan area of over 13 million  
 
inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for 
 
    two millennia, its history going back to its founding by the Romans, who 
 
    named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

來源

2016-09-19 18:11:53

添加margin-top（在我的例子100像素），在內容的第一個非固定的元素以創建固定頭的東西的空間，再加上加html, body {margin: 0; }重置影響您的非固定內容寬度的默認邊距。

並且還對所有元素使用box-sizing: border-box;以包含百分比寬度中的邊框。（見段）

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    * { 
 
     box-sizing: border-box; 
 
    } 
 
    body, 
 
    html { 
 
     margin: 0; 
 
    } 
 
    div.container { 
 
     width: 100%; 
 
     border: 1px solid gray; 
 
    } 
 
    header { 
 
     position: fixed; 
 
     width: 100%; 
 
     right: 0px; 
 
    } 
 
    header, 
 
    footer { 
 
     padding: 1em; 
 
     color: white; 
 
     background-color: black; 
 
     clear: left; 
 
     text-align: center; 
 
    } 
 
    nav { 
 
     float: left; 
 
     max-width: 160px; 
 
     margin: 0; 
 
     padding: 1em; 
 
     margin-top: 100px; 
 
    } 
 
    nav ul { 
 
     list-style-type: none; 
 
     padding: 0; 
 
    } 
 
    nav ul a { 
 
     text-decoration: none; 
 
    } 
 
    article { 
 
     margin-left: 170px; 
 
     border-left: 1px solid gray; 
 
     padding: 1em; 
 
     overflow: hidden; 
 
     margin-top: 100px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 

 
    <header> 
 
     <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
     <ul> 
 
     <li><a href="#">London</a> 
 
     </li> 
 
     <li><a href="#">Paris</a> 
 
     </li> 
 
     <li><a href="#">Tokyo</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 

 
    <article> 
 
     <h1>London</h1> 
 
     <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
     <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
    </article> 
 

 
    <footer>Copyright © W3Schools.com</footer> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-09-19 18:23:42 Johannes

這個工程。謝謝！但是，我可以通過不計算margin-top – Mitali

來獲得最優化的方式，它只取決於頂部固定部分的高度。通常這是你知道的東西（例如帶有背景圖片的標題，裏面帶有文字），所以你只需把這個高度作爲非固定內容的邊緣頂部。（順便說一下：浮動和清除對固定元素沒有任何影響 - 你在頭文件中有一個「明確的：兩個」......） – Johannes

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Fixed Header</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p> 

    <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The effect varies depending on where you are on the page.</p> 

    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
    <h1>Fixed Footer</h1> 
    </div> 
</div> 

</body> 
</html>

來源

2016-09-19 18:25:32

使固定標題的寬度與容器div相同大小

回答

相關問題