内容div尽可能不扩展

时间：2014-07-29 02:41:00

标签： html web

所以似乎问题是我的内容div没有一直向下扩展。宽度正是我想要的，但底部似乎悬停或卡在页面中间。这会导致我的页脚也粘在内容div的底部。我该怎么做才能解决这个问题？我知道有很多像这样的问题，但没有一个答案似乎适合我。

** LT; --- --- HTML＆GT; ** 

<!DOCTYPE html>

<html>
<head>
    <title>Stan Mattingly</title>
    <link type="text/css" rel="stylesheet" href="personalStyle.css"/>
</head>

<body>

    <div id="header">
        <a href="PersonalHome.html">
            <p id = "logo">Stan Mattingly</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Contact</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">About</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Home</p>
        </a> 



    </div>

    <div id="content">
        <h1>Click A Link To Get Started.</h1>
        <div id = "social">
            <a href="https://www.facebook.com/DontMakeYourArmsFallOff">
                <img src="facebook button.png"/>
            </a>
            <a href="https://twitter.com/StanMattingly">
                <img src="twitter logo.png"/>
            </a>
            <a href="http://soundcloud.com/djmicrocrush">
                <img src="soundcloud logo.png"/>
            </a>
            <a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
                <img src="hudle logo.png"/>
            </a>
        </div>

    </div>

    <div id="footer">
        <p>This is 100% designed and created by yours truly.</p>
    </div>
</body>
</html>

＆LT; --- --- CSS＆GT; 

#header
{
    background-color: rgba(225,225,225,.6);
    height: 60px;
    width: 100%;
    margin: -10px -20px 0px 0px;
    font-size: 20px;
    display: inline-block;

}
#logo
{
    float: left;
    margin: 15px 10px 0px 10px;
    position: absolute;
}
.button
{
    float: right;
    margin: auto;
    margin: 15px 10px 0px 10px;
}

#content
{
    background-color: rgba(0,0,0,.8);
    height: 100%;
    width: 85%;
    margin: -9px auto -15px auto;
    padding: 10px;
    color: white;
    text-align: center;


}
#social
{
    padding: 40px;
    margin: 10px auto 10px auto;
    display: inline-block;

}
#footer
{
    background-color: rgba(225,225,225,.6);
    height: 45px;
    width: 100%;
    margin-left: 0px;
    text-align: center;
    clear: both;

}
body, html{
    height: auto;
    width: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom:0px;
    background-image: url("stars.jpg");


}
*
{
    font-family: Segoe Script;
}

#header a:link
{
    color: black;
    text-decoration: none;
}

#header a:hover 
{
    color: rgba(0,0,0,.8);
    text-decoration: none;
}

#header a:visited
{
    text-decoration: none;
    color: black  
}

#content a:link
{
    color: white;
    text-decoration: none;
}

#content a:hover 
{
    color: rgba(225,225,225,.6);
    text-decoration: none;
}

#content a:visited
{
    text-decoration: none;
    color: white; 
}
#footer a:link
{
   color: black;
   text-decoration: none;
}

#footer a:hover 
{
    color: rgba(0,0,0,.8);
    text-decoration: none;
}

#footer a:visited{
    text-decoration: none;
    color: black  
}

3 个答案:

答案 0 :(得分：1)

您的内容div将根据需要扩展的范围扩展，具体取决于内容＆＃34;在你的内容div中。例如，如果我在内容div中放置一个段落，只要段落使其扩展，它就会延长。请检查下面的代码，并在内容div中插入一个段落。 

<!DOCTYPE html>

<html>
<head>
    <title>Stan Mattingly</title>
    <link type="text/css" rel="stylesheet" href="personalStyle.css"/>
</head>

<body>

    <div id="header">
        <a href="PersonalHome.html">
            <p id = "logo">Stan Mattingly</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Contact</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">About</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Home</p>
        </a> 



    </div>

    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dapibus turpis, ac tincidunt eros. Nullam eget facilisis est. Nam at malesuada nunc. Duis metus arcu, iaculis at dapibus eu, semper suscipit diam. Pellentesque pellentesque nec libero et fringilla. Praesent pharetra placerat felis, tempor laoreet urna accumsan ac. Vivamus iaculis, odio nec pulvinar varius, magna dui interdum diam, nec blandit ligula justo ac quam. Fusce tempor, velit eu fringilla consequat, metus ante molestie tortor, ac volutpat nisi leo non nulla. Etiam sed nunc non magna porttitor sodales vel id ligula. Cras porta enim lorem, in pulvinar est dictum non. Cras ut dui fringilla sapien porta dictum. Proin egestas fermentum libero, nec tincidunt velit fringilla at. Cras lacinia ligula vehicula egestas interdum. Proin feugiat urna ligula, sodales gravida sem accumsan sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eros lorem, varius at lobortis ut, vehicula id metus. Donec at tellus at urna eleifend auctor. Fusce vitae orci risus. Quisque convallis ut orci in commodo. Nulla nec tellus non sem adipiscing tristique a sed nisi. Aenean arcu elit, condimentum non odio sit amet, tincidunt consectetur dolor. Ut lorem elit, lacinia nec justo eu, sodales aliquet nulla. Morbi luctus in nunc quis molestie. Maecenas ut bibendum quam. Integer rhoncus viverra ligula et lacinia. Pellentesque augue magna, imperdiet quis nulla vel, congue dignissim justo. Etiam ut vulputate nibh, et lobortis neque. Vestibulum pellentesque orci ut eros posuere, quis malesuada purus vestibulum. Aenean ultricies justo faucibus eros ultrices, sed vestibulum sem luctus. Nam pulvinar, quam in rhoncus facilisis, urna dui blandit magna, nec auctor quam orci eu eros. Ut et justo nisi. Duis ligula lectus, pulvinar eget dui a, porttitor congue risus. Donec ac eros eleifend, faucibus ipsum molestie, lacinia augue. Fusce suscipit quis nunc fermentum posuere. Integer gravida scelerisque mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros mi. Morbi molestie, dolor id pellentesque venenatis, nunc quam venenatis felis, at sollicitudin nisi lectus id lectus. Vestibulum quis vulputate purus, in varius arcu. Donec ut massa tellus. Ut fringilla nisl tempus mi tincidunt scelerisque. Sed sit amet egestas elit, vitae vestibulum nisl. Etiam suscipit commodo varius. Nullam bibendum orci felis, vitae suscipit risus pharetra id. Etiam nec convallis ipsum. Nullam facilisis mi eget nulla pulvinar, at placerat risus malesuada. Nullam id est nulla. Proin aliquet est dui, ut sollicitudin mauris condimentum eget. Nam dictum arcu id venenatis lacinia. Donec vel mi sit amet ipsum adipiscing rhoncus. Phasellus blandit vestibulum nisl ac fringilla. Vestibulum metus augue, auctor vitae accumsan a, bibendum at elit. Proin erat purus, placerat sed cursus vel, placerat ac erat. Pellentesque id egestas enim, ac vehicula tellus. </p>
        <h1>Click A Link To Get Started.</h1>
        <div id = "social">
            <a href="https://www.facebook.com/DontMakeYourArmsFallOff">
                <img src="facebook button.png"/>
            </a>
            <a href="https://twitter.com/StanMattingly">
                <img src="twitter logo.png"/>
            </a>
            <a href="http://soundcloud.com/djmicrocrush">
                <img src="soundcloud logo.png"/>
            </a>
            <a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
                <img src="hudle logo.png"/>
            </a>
        </div>

    </div>

    <div id="footer">
        <p>This is 100% designed and created by yours truly.</p>
    </div>
</body>
</html>

答案 1 :(得分：0)

CSS的一点变化

<style type="text/css">
        #header
    {
        background-color: rgba(225,225,225,.6);
        height: 60px;

        width: 85%;
        font-size: 20px;
        display: inline-block;
        margin-left: 150px;
        margin-right: auto;

    }
    #logo
    {
        float: left;
        margin: 15px 10px 0px 10px;
        position: absolute;
    }
    .button
    {
        float: right;
        margin: auto;
        margin: 15px 10px 0px 10px;
    }

    #content
    {
        background-color: rgba(0,0,0,.8);
        height: 100%;
        width: 85%;
        margin-left: auto;
        margin-right: auto;

        padding: 10px;
        color: white;
        text-align: center;


    }
    #social
    {
        padding: 40px;
        margin: 10px auto 10px auto;
        display: inline-block;

    }
    #footer
    {
        background-color: rgba(225,225,225,.6);
        height: 45px;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        clear: both;

    }
    body, html{
        height: auto;
        width: auto;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom:0px;
        background-image: url("stars.jpg");


    }
    *
    {
        font-family: Segoe Script;
    }

    #header a:link
    {
        color: black;
        text-decoration: none;
    }

    #header a:hover 
    {
        color: rgba(0,0,0,.8);
        text-decoration: none;
    }

    #header a:visited
    {
        text-decoration: none;
        color: black  
    }

    #content a:link
    {
        color: white;
        text-decoration: none;
    }

    #content a:hover 
    {
        color: rgba(225,225,225,.6);
        text-decoration: none;
    }

    #content a:visited
    {
        text-decoration: none;
        color: white; 
    }
    #footer a:link
    {
       color: black;
       text-decoration: none;
    }

    #footer a:hover 
    {
        color: rgba(0,0,0,.8);
        text-decoration: none;
    }

    #footer a:visited{
        text-decoration: none;
        color: black  }
    *.cImg
       {
            width: 50px;
            height: 50px;
        }

        </style>

HTML：

<div id="header">
        <a href="PersonalHome.html">
            <p id = "logo">Stan Mattingly</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Contact</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">About</p>
        </a>
        <a href="PersonalHome.html">
            <p class = "button">Home</p>
        </a> 



    </div>

    <div id="content">
        <h1>Click A Link To Get Started.</h1>
        <div id = "social">
            <a href="https://www.facebook.com/DontMakeYourArmsFallOff">
                <img src="facebook button.png"/>
            </a>
            <a href="https://twitter.com/StanMattingly">
                <img src="twitter logo.png"/>
            </a>
            <a href="http://soundcloud.com/djmicrocrush">
                <img src="soundcloud logo.png"/>
            </a>
            <a href="http://www.hudl.com/athlete/2671311/stan-mattingly">
                <img src="hudle logo.png"/>
            </a>
        </div>

    </div>

    <div id="footer">
        <p>This is 100% designed and created by yours truly.</p>
    </div>

我不知道你究竟是什么意思，但要测试一下，并告诉我你想要什么。我会帮助你。

答案 2 :(得分：0)

#header
{
    background-color: rgba(225,225,225,.6);
    height: 15%;
    width: 100%;
    margin: -10px -20px 0px 0px;
    font-size: 20px;
    display: inline-block;

}
#logo
{
    float: left;
    margin: 15px 10px 0px 10px;
    position: absolute;
}
.button
{
    float: right;
    margin: auto;
    margin: 15px 10px 0px 10px;
}

#content
{
    background-color: rgba(0,0,0,.8);
    height: 80%;
    width: 98%;
    margin: -9px auto -15px auto;
    padding: 10px;
    color: white;
    text-align: center;
    position:absolute;


}
#social
{
    padding: 40px;
    margin: 10px auto 10px auto;
    display: inline-block;


}
#footer
{
    background-color: rgba(225,225,225,.6);
    height: 20%;
    width: 100%;
    margin-left: 0px;
    text-align: center;
    clear: both;
    padding-top:40%


}
body, html{
    height: auto;
    width: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom:0px;
    background-image: url("stars.jpg");


}
*
{
    font-family: Segoe Script;
}

#header a:link
{
    color: black;
    text-decoration: none;
}

#header a:hover 
{
    color: rgba(0,0,0,.8);
    text-decoration: none;
}

#header a:visited
{
    text-decoration: none;
    color: black  
}

#content a:link
{
    color: white;
    text-decoration: none;
}

#content a:hover 
{
    color: rgba(225,225,225,.6);
    text-decoration: none;
}

#content a:visited
{
    text-decoration: none;
    color: white; 
}
#footer a:link
{
   color: black;
   text-decoration: none;
}

#footer a:hover 
{
    color: rgba(0,0,0,.8);
    text-decoration: none;
}

#footer a:visited{
    text-decoration: none;
    color: black  
}
相关问题
最新问题