Question

有人可以发现错误或告诉我如何解决问题吗？

我在下面有一个网站的HTML和CSS。我希望侧边栏的高度与旁边的内容部分相同，因此它们都会延伸到网页的底部。在html，body和div元素上使用height：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>

希望这一切都有意义。我尝试过在这个网站上找到很多不同的建议，但我似乎无法发现如何解决这个问题。非常感谢你。

Answer 1

根据你所说的，这是我对你所收集的内容的最佳解释。（将这些添加到当前的CSS中）：

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

如果我错了，请纠正我。祝你好运！

两个divs内容和侧边栏的高度

1 个答案: