是否有可能做一個最大寬度的固定標題？

我在站點頂部有一個居中的標題div;它目前不是固定的，並且具有最大寬度設置，因此它被封頂和響應。這很容易做到;您只需設置最大寬度並使用邊距將其居中。是否有可能做一個最大寬度的固定標題？

我的客戶現在希望頭部滾動時固定在頁面的頂部。如何保持居中的最大寬度（上限和響應）並使其固定？

來源

2015-10-15 Ryan

您可以將位置設置爲固定和頂部，左，右邊0.將邊距和填充設置爲0.還要將z-index設置爲高，以便始終位於頂部。 –

會不會更像寬度：100％？我想要max-width：900px，這樣寬度就被封頂了。 – Ryan

然後不要設置左值或右值。將最大寬度設置爲900並將左/右邊距設置爲自動。 –

你需要這樣的東西嗎？

的HTML

<div class='fixed-top'> 
    <h1 align='center'>Example Fixed Top Header</h1> 
</div> 
<div class='container'> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
</div>

的CSS

.fixed-top { 
    left: 0; 
    margin: 0 auto; 
    max-width: 200px; 
    position: fixed; 
    right: 0; 

    background-color: blue; 
    } 
.container{ 
    padding-top:200px; 
height: 1800px; 
}

http://jsfiddle.net/grk6petn/

來源

2015-10-15 02:25:47 Bak

使用位置固定的上，左，右設置爲0，然後使用保證金左/右自動。添加100％寬度並應用最大寬度。不要忘記一個大的Z指數。

.navbar { 
    position: fixed; 
    top: 0; 
    z-index: 1000; 
    max-width: 900px; 
    width: 100%; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
}

http://jsfiddle.net/pa2xxxjn/1/

來源

2015-10-15 02:34:14

非常接近，但我需要藍色部分堅持身體邊緣，因爲我需要藍色的邊緣始終與綠色的邊緣排隊。 – Ryan

@Ryan這是否解決你的問題http://jsfiddle.net/pa2xxxjn/2/？基本上將導航欄和內容設置爲具有相同的頁邊距。 – GibboK

@GibboK謝謝你幫我看看。不，那不是。我的意思是左右邊距。我只需要藍色就像綠色一樣留在左右邊緣之外。 – Ryan

你可以貼在你的頁面的頂部你的頭使用position:fixed;和top:0;

https://jsfiddle.net/yxuk5guh/2/

#header { 
    top: 0; 
    position: fixed; 
    left:0; 
    max-width: 500px; 
    height: 50px; 
    background-color: blue; 
} 
#content { 
    height: 1800px; 
}

來源

2015-10-15 08:39:38 GibboK

我需要藍色標題才能像文本一樣堅持左右邊距。感謝您看這個。 – Ryan

我想澄清一下。當瀏覽器的寬度小於最大寬度時，我需要藍色標題符合左側和右側邊距。看看標題如何進入左右邊距？當瀏覽器的寬度大於最大寬度時，它會按我的需要工作。 – Ryan

是否有可能做一個最大寬度的固定標題？

回答

相關問題