有固定位置和相對位置使網頁佈局發生問題

我想根據瀏覽器大小製作正確縮放的網站。我知道通常需要將所有寬度和高度設置爲100％，但是我不知道如何設置頁眉和頁腳的最小高度和最小高度。學校徽標將顯示在標題太小時無法閱讀，側邊欄中顯示Google日曆。有固定位置和相對位置使網頁佈局發生問題

我想要做的就是設置它，使標題和副標題（深藍色和深灰色條）被設置爲固定位置。側邊欄（黑色欄）設置爲固定，以及頁腳（淺灰色）。內容部分（白色框）我想成爲包含所有新聞和更新的唯一可滾動部分。無論我如何設置，總是不適當地移動。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title> 
     Website Layout Test 
    </title>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">  
</head> 

<body> 
    <div id="header-container"> 
     <div id="header"></div> 
     <div id="sub-header"></div> 
    </div> 

    <div id="content-container"> 
     <div id="content"></div> 
     <div id="sidebar"></div> 
    </div> 

    <div id="footer"></div> 
</body> 

</html>

和CSS

#header-container{ 
    width:100%; 
    height:96px; 
    position:relative; 
} 
#header{ 
    width:100%; 
    background-color:#013066; 
    height:60px; 
    position:fixed; 
} 
#sub-header{ 
    width:100%; 
    background-color:grey; 
    margin-top:60px; 
    height:36px; 
    position:fixed; 
} 
#content-container{ 
    width:100%; 
    height:100%; 
    position:relative; 
    padding-bottom:55px; 
    background-color:pink; 
} 
#content{ 
    background-color:white; 
    float:left; 
    height:100%; 
    width:100%; 
    position:relative; 
} 
#sidebar{ 
    width:315px; 
    height:100%; 
    background-color:black; 
    position:fixed; 
    right:0px; 
} 
#footer{ 
    position:fixed; 
    bottom:0px; 
    height:40px; 
    width:100%; 
    background-color:#f6f6f6; 
}

來源

2015-07-20 Ryan A.

add z-index：10 to＃header-container ....並且你所有的問題都會解決！

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 
    Website Layout Test 
</title>   


<style> 
    #header-container{ 
width:100%; 
height:96px; 
position:relative; 
    z-index: 10; 
} 
#header{ 
width:100%; 
background-color:#013066; 
height:60px; 
position:fixed; 
} 
#sub-header{ 
width:100%; 
background-color:grey; 
margin-top:60px; 
height:36px; 
position:fixed; 
} 
#content-container{ 
width:100%; 
height:1021px; 
position:relative; 
padding-bottom:55px; 

} 
#content{ 
background-color:white; 
float:left; 
height:100%; 
width:100%; 
position:relative; 
border: 10px solid red; 
} 
#sidebar{ 
width:315px; 
height:100%; 
background-color:black; 
position:fixed; 
right:0px; 
} 
#footer{ 
position:fixed; 
bottom:0px; 
height:40px; 
width:100%; 
background-color:#f6f6f6; 
} 
</style> 
</head> 

<body> 
<div id="header-container"> 
    <div id="header"></div> 
    <div id="sub-header"></div> 
</div> 

<div id="content-container"> 
    <div id="content"></div> 
    <div id="sidebar"></div> 
</div> 

<div id="footer"></div> 
</body> 

</html>

來源

2015-07-20 19:12:34

謝謝，令人驚訝的工作完美！我猜測，這與內容容器在標題容器上滾動有關，而不是後者滾動。 –

當html中的兩個元素重疊時，則根據元素的z-index將其隱藏在另一個下面。因爲我已經將headcontainer的z-index設置爲10，它總是會在contentconatiner之上。 10號井是我用過的一個隨機值。你可以使用任何其他更高的價值。具有最高Z指數的元素保持在頂部。良好運氣！ –

我不認爲你需要的所有的位置是：相對的;如果你正在使用浮游物，那裏有東西。你可以做的另一件事是將「overflow：auto」添加到內容div，並對其他內容做「overflow：hidden」。你看過Bootstrap嗎？如果您使用引導程序，這非常簡單。退房：http://getbootstrap.com/，它使這種類型的東西非常非常容易。

來源

2015-07-20 17:32:56

感謝您的建議，但還有很多我需要做的最重要的是，我不知道會與bootstrap兼容，並且目前沒有時間來查明它是否存在。 –

有固定位置和相對位置使網頁佈局發生問題

回答

相關問題