兩個div的高度 - 內容和邊欄

有人能發現錯誤或告訴我如何解決問題嗎？兩個div的高度 - 內容和邊欄

我有一個網站的HTML和CSS下面。我希望獲得與旁邊內容部分高度相同的邊欄，以便它們都延伸到網頁的底部。在html，body和div元素上使用高度：100％可以提供完整的瀏覽器高度，而不是內容的高度。離開高度離開邊欄太短。內容和側邊欄（欄目導航）是否有匹配的方式？

這是當前的CSS我寫：

html 
{ 
    min-height:100%; 
    position: relative; 
} 

body 
{ 
    margin: 0; 
    padding: 0; 
    font-family: "Sans-serif", calibri; 
} 

.headerreplacement 
{ 
    width: 100%; 
    height: 250px; 
    margin: 0 0 0 0; 
    background: url(newspaperbanners.png) no-repeat; 
} 

#navigation 
{ 
    float: left; 
    background: #333; 
    width: 100%; 
} 

#navigation ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li 
{ 
    list-style-type: none; 
    display: inline; 
} 

#navigation ul li a 
{ 
    display: block; 
    float: left; 
    text-decoration: none; 
    width: 100px; 
    color: white; 
    text-align: center; 
    padding: 10px 10px; 
} 

#navigation li a:hover 
{ 
    background: #996699; 
    text-decoration: underline; 
} 

.visiting_link 
{ 
    background: #333; 
    clear:both; 
} 

.submenu 
{ 
    clear:both; 
    padding-left: 20px; 
} 

#content-container 
{ 
    width: 100%; 
    margin: 0; 
    padding:0; 
} 

#section-navigation 
{ 
    width: 280px; 
    position: relative; 
    background-color: #996699; 
    margin: 0; 
    height: inherit; 
} 

#section-navigation ul 
{ 
    margin: 20px; 
    padding: 0; 
} 

#section-navigation ul li 
{ 
    list-style-type: none; 
} 

#section-navigation ul li a 
{ 
    display: block; 
    color: white; 
    text-decoration: none; 
    padding: 10px 10px; 
} 

#section-navigation ul li a:hover 
{ 
    background: #333; 
    text-decoration: underline; 
} 

#content 
{ 
float: left; 
width:50%; 
    overflow: hidden; 
    height:100%; 
    margin: 0 200px 50px 50px; 
}

HTML的基本輪廓如下。然而，在div id =「content」部分，其他網頁上會出現更多文字。

<head> 
    <title> Uniform and Equipment | Scottish Fire Services: Inter War Years 
    </title> 
    <link rel= "stylesheet" href="stylesheet.css"/> 

    <!-- Metadata goes here --> 

</head> 

<body> 
    <div id="header"> 
     <h1 class="headerreplacement"> </h1> 
    </div> 

    <div id="navigation"> 
     <ul> 
      <li><a href="homepage.html">Home </a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="references.html">References</a></li> 
      <li><a href="sitemap.html">Sitemap</a></li> 
     </ul> 
     <form id="searchbar" ><p> <label> Search <input type="search"/> </form> 
    </div> 

    <div id="content-container"> 

     <div id="section-navigation"> 
      <ul> 
       <li ><a href="historical_context.html">The Inter-War Period, 1918-1939</a></li> 
       <li><a href="auxiliary_fire_service.html"> The Auxiliary Fire Service</a></li> 
       <li><a href="camaraderie.html">Firehouse Camaraderie</a></li> 
       <li><a href="fire_brigades_in_scotland.html">Fire Brigades in Scotland</a></li> 
       <li><a href="fire_trucks.html">Fire Trucks</a></li> 
       <li><a href="legislation_changes.html">Legislation Changes</a></li> 
       <li><a href="major_fires.html">Major fires</a></li> 
       <li class="visiting_link"><a href="uniform_equipment.html">Uniform and Equipment </a></li> 

         <li class="submenu" ><a href="uniforms.html">Uniforms</a></li> 
         <li class="submenu"><a href="auxiliary_fire_service_uniform.html">Auxiliary Fire Service Uniform</a><li> 
         <li class="submenu"><a href="equipment.html">Equipment</a></li> 

      </ul> 
     </div> 
     <div id="content"> <!-- Content can be changed --> 
      <h1> Uniform and Equipment </h1> 
      <p> During the inter war years, there were some small changes to the uniform and equipment of the Scottish Fire Services.</p> 

      <!-- side by side images, where the image is the link, description underneath--> 
      <div class="multiple-images"> 
       <a href="uniforms.html"> 
        <img src="uniform.png" alt="Photo of two men in full firefighting uniform" 
        width="200px" height="265px">  
       </a> 
       <div id="description-hyperlink"><a href="uniforms.html">More about uniforms</a></div> 
      </div> 
      <div class="multiple-images"> 
       <a href="equipment.html"> 
        <img src="equipment.jpg" alt="Photo fire engines" 
        width="200px" height="265px">  
       </a> 
       <div id="description-hyperlink"><a href="equipment.html">Read more about equipment</a></div> 
      </div> 

     </div> 
    </div> 



</body>

希望這一切是很有意義的。我試過用這個網站上的很多不同的建議，但我似乎無法找到如何解決這個問題。提前謝謝你。

來源

2015-04-20 AlanB

這是我根據你所說的收集到的意思的最好解釋; （將這些添加到您當前的CSS中）：

#section-navigation { float:left; } 
    #section-navigation ul { height:100%; } 
    #content { margin:0 200px 0 50px; }

糾正我，如果我錯了。祝你好運！

來源

2015-04-20 21:30:28 Matt

兩個div的高度 - 內容和邊欄

回答

相關問題