如何使用定位屬性網站

我試圖建立一個網站，但即時將位置屬性應用時，它會感到困惑.. 1.-我想創建一個導航欄在頂部使用20％的網站頁面和寬度：100％和固定位置 2.-在導航欄下方有圖片滑塊，其中一些圖片的寬度爲100％，高度爲網頁的60％。 3.-下應該來的寬度100％和高度20％的頁腳，但我希望你可以滾動一點點。如何使用定位屬性網站

所以我tryed像這樣..建議，將真正apreciated ..即時通訊限定％的寬度和高度，因爲我想調整的網頁瀏覽器是否調整窗口大小

的感謝！

<head> 
    <style> 

.body { 
margin: 0 0 0 0; 

    .navigation { 
    background-color: lightyellow; 
    width:100%; 
    height:20%; 
    position:fixed; 
    } 

    .slider{ 
    position: absolute; 
    top:20% 
    height:60%; 
    width:100% 
    background-color: lightgreen; 
    } 

    .footer{ 
    position:relative; 
    top:80%; 
    color:lightblue; 
    height:20%; 
    width:100% 
    } 

    </style> 
</head> 

<body> 
     <div class="navigation"> 
     </div> 

     <div class="slider"> 
     </div> 

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

來源

2014-04-01 user3013745

你能提供一個小提琴的鏈接，讓這個更清楚一點嗎？ –

你幾乎有這個正確的，除了幾個拼寫錯誤和遺漏神奇html, body: 100%它給你一個參考點，從定義的高度。

你有.body但應該只是body
你在.slider風格缺席兩場;小號造成其他樣式被ommitted
您定義的.slider 20％的高度，但你想讓它60％。
你有color: lightBlue而不是background: lightBlue在.footer風格

這是你所需要的：

html, body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

.navigation { 
    background-color: lightyellow; 
    width:100%; 
    height:20%; 
    position:fixed; 
} 

.slider { 
    position: absolute; 
    top:20%; 
    height:20%; 
    width:100%; 
    background-color: lightgreen; 
} 

.footer { 
    position: relative; 
    top: 80%; 
    background-color: lightblue; 
    height: 20%; 
    width: 100%; 
}

Demo

注：不太清楚你的意思想要一點什麼一個滾動條，但如果你真的想要滾動，你可以使頁腳超過20％。

來源

2014-04-01 22:09:48 davidpauljunior

謝謝！這有助於:) ..我會爲你的答案投票，但我的聲望還很低 – user3013745

你仍然可以接受它是正確的:) – davidpauljunior

如何使用定位屬性網站

回答

相關問題