無論我做什麼，我的div不想100％身高...：/

編輯：我發現出於某種奇怪的原因，我的＃內容繼承了一個高度屬性。我不知道爲什麼，或者爲什麼這會覆蓋我想要設置的高度。：/無論我做什麼，我的div不想100％身高...：/

我對此做了大量的研究，但是我對css並不擅長，所以我似乎無法弄清楚。我正在爲一個uni項目建立一個小型網站，除了一件事外，一切正常。內容div只是不想填寫我告訴它的高度。

<body> 
    <div id="container"> 
     <div class="logo"><img src="/Users/sophie/Dropbox/3 Uni/MultiEngI/Aufgabe 1/Acc/ArtArchiveLogo500.png" alt="ArtArchive" /></div> 
     <div class="header">ArtArchive</div> 
     <div id="nav"><li> 
      <ul> 
       <a href="#">Upload</a> 
      </ul> 
      <ul> 
       <a href="#">Organize</a> 
      </ul> 
      <ul> 
       <a href="#">Browse</a> 
      </ul> 
     </li> 
     </li></div> 
     <div id="content" style="height:100%;">I am empty :(</div> 
     <div class="footer">I am empty :(</div> 
    </div> 
</body>

那是HTML的一部分，該CSS：

.header { 
    background:#c61350; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
    padding:10px; 
} 

    .header { 
    border-bottom: 12px solid #cd365b; 
    color: white; 
    font-size: 36px; 
    font-family: 'Lato',arial,sans-serif; 
    letter-spacing: 50px; 
} 

    #content { 
    height : auto !important; 
    height : 100%;    
    min-height : 100%; 
    background: #fff; 
    width: 60%; 
    overflow: auto; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
.footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#5f4e54; 
}

id爲內容的DIV應該是100％的高度，這是不是。感謝您閱讀本文:)

來源

2014-10-16 Ozymandias

財產和冒號之間的空間是否有效？例如'高度：' – TylerH 2014-10-16 15:04:51

您正在申報height : auto !important;。 !important聲明優先於其他相同的樣式屬性。簡單地刪除這樣的：

#content { 
    height: auto; 
    height: 100%;    
    min-height : 100%; 
    ... 
}

請注意，雖然你的#content元素將是100％的#container家長的高度。如果您的#container元素本身沒有高度，您的#content元素也將沒有高度。您可能需要改用vh單位。如果是這種情況，請在這裏看到我的其他答案：Make div 100% height of browser window。

來源

2014-10-16 15:02:22

無論我做什麼，我的div不想100％身高...：/

回答

相關問題