代碼中有什麼是不必要的？

-2

enter image description here

需要考慮的事情是，這將是一個棘手的註腳而且將永遠是在頁面的底部。
中間的內容頁面應設置爲等於頁眉和頁腳的距離，如果內容長於滾動條，則應自動放置。

**如果在我的代碼中有什麼是不必要的，請讓我知道。我希望它是一個簡單的設計。

**您也可以通過JSFIDDLE注意到我的黑色主內容div真的很短。我刪除了高度，因爲當我添加內容時，它在滾動一點之後並未顯示全部內容。拿出高度可以解決問題。但是如果我在頁面上沒有內容，比如主頁面，那麼這個頁面頂部就是一個非常漂亮的矩形，它不是我想要的。我希望內容是從頁眉的頂部到頁腳，如果內容多，它會向下滾動，直到沒有更多內容爲止。

JSFIDDLE

HTML代碼：

<body> 
<div id="page"> 
     <div id="header"> 

     </div> 

     <div id="main"> 

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

     </div> 
</div> 
</body>

CSS代碼：

html, body 
{ 
     padding:0; 
     margin:0; 
     height:100%; 
} 
#page 
{ 
     min-height:100%; 
     position:relative; 
     height:100%; 
     min-width:960px; 
} 
#header 
{ 
     background-color:#115EA2; 
     height:100px; 
     width:100%; 
     position:relative; 
} 
#main 
{ 
     width:1300px; 
     margin-left:auto; 
     margin-right:auto; 
     background-color:#F1F2F3; 
     /*min-height:100%; 
     height:auto; 
     height:100%;*/ 
     margin:0 auto -50px; 
     vertical-align:bottom; 
     text-align: left; 
     color:#115EA2; 
     padding: 20px 20px 40px 20px; 
     text-decoration: none; 
} 


#footer 
{ 
     position:fixed; 
     width:100%; 
     bottom:0; 
     height:35px; 
     background-color: #115EA2; 
} 

/* NAVIGATION BAR CODE */ 
#navigation 
{ 
     min-width:930px; 
     position:relative; 
     white-space:nowrap; 
     padding:65px 0 0 0; 
}

來源

2013-07-25 Krishp

雖然這是一個好主意，要求別人爲您檢查代碼和網頁設計，這種問題是不適合的堆棧溢出。這個問題[主要是基於意見的]（http://stackoverflow.com/help/dont-ask），這是在這裏要避免的。 – jwiscarson

看起來像一個完美的適合http://codereview.stackexchange.com/但是:) –

你的問題是什麼？（和不，問我們是否喜歡你的設計不是一個有效的問題） – feitla

我編輯了你的小提琴的建議。如果您修復了頁腳，最好將頁眉固定，否則用戶每次想要導航到另一頁時都會向上滾動。

EXAMPLE

Hope this Help

來源

2013-07-26 00:08:41 Thanos

你的例子工作得很好，除了頭部固定部分。當我測試你的示例時，它在Chrome中正常工作。當我測試標題：固定;在IE中，標題與主體對齊。所以標題開始像約100px。所以把它改回相對它工作得很好。 – Krishp

@Krishp，你是對的IE瀏覽器。這是因爲您需要指定徽標的尺寸。如果它們大於可用空間，則徽標圖像將拉動下方的導航欄。 http://jsfiddle.net/Br7nN/8/ – Thanos

http://jsfiddle.net/feitla/Br7nN/6/

添加overflow-y:scroll;和height值一樣100%噸你的#main

我清理了一些不必要的CSS，儘管可能有更多可以刪除的CSS。通過查看一些css規則很難說你的最終目標是什麼。

#main { 
    width:1300px; 
    height:100%; 
    background-color:black; 
    margin:0 auto -50px; 
    vertical-align:bottom; 
    color:black; 
    padding: 20px 20px 40px 20px; 
    text-decoration: none; 
    overflow-y:scroll; 
}

來源

2013-07-25 23:04:13 feitla

謝謝你的幫助。我會嘗試你給我的代碼。我在原始問題中添加了圖片和描述，以準確地向大家展示我正在嘗試的內容。 – Krishp

我試過你的方法，它在JSFiddle中看起來很好。當我嘗試用我的服務器時，問題是我的頁眉和頁腳都很好，但是當主頁面放在頂部的某個位置時，您可以在頁眉頂部看到主div底部的一部分，並且稍微通過了它。 – Krishp

代碼中有什麼是不必要的？

回答

相關問題