内容的文本超过了页脚div

时间:2012-09-30 13:44:50

标签: html css

我有以下HTML代码,如果我的div中有很多文本称为内容,则页脚div不会向下移动,文本会超过我的页脚div。

要查看问题,请查看此链接http://jsfiddle.net/LhzrQ/

你能告诉我如何解决这个问题吗?

    

    <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>

        <div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
            HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
            HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

        </div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            Copyright © W3Schools.com
        </div>

    </div>

</body>

2 个答案:

答案 0 :(得分:3)

您可以删除内容div的高度元素。

请参阅:http://jsfiddle.net/LhzrQ/1/

答案 1 :(得分:1)

工作fiddle

fixed height移至content div。它会起作用。