Question

CSS初学者在这里，我的智慧结束了一个相对简单的CSS布局，希望有人能为我看看它..

我得到了什么： enter image description here

暂时嵌入CSS，原因是缩进（我只是来自编程和缩进让我理解它）：

<!DOCTYPE HTML>
<html lang="en">

<style>

* {margin: 0; padding:0;}
body
{
    font: normal 100% Helvetica, Arial, sans-serif;
    background-color: LightSkyBlue;
    margin: auto auto;
    max-width: 90%; 
}

#central_container
{
    background-color: Yellow;
    width: 100%;
    margin: auto auto;
    float: left;
}
#leftside_container
{
    background-color: Ivory;
    float: left;
    width: 66%; 
    clear: left;
}
    #header_container
    {
    background-color: DeepSkyBlue;
    width: 100%;
    height: 15em;
    }
        #header_title
        {
            background-color: Lime;
            width: 100%;
            height: 80%;
        }
            #header_title h1{ padding: 0; margin: 0; }

        #navbar_container
        {
            background-color: Coral;
            width: 100%;
            height: 20%;
        }
            .navbar_links{ background-color: HotPink; }

        #currentpage_content
        {
            background-color: grey;
            width: 100%;
            height: 20%;
        }

#rightside_container
{
    background-color: Khaki;
    float: right;
    width: 33%; <!--/* 320 /960 */-->
}
    #register_container
    {
        background-color: LightPink;
        width: 100%;
    }
    #contacts_content
    {
        background-color: SeaGreen;
        width: 100%;
    }

</style>


<head>
    <title>Verge Green IT</title>
    <link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>


<body>
<div id="central_container">


    <!--Left-side Current-page Content-->
    <div id="leftside_container">

        <!--Header-->
        <div id="header_container">

            <div id="header_title">
            <h1>#header_title</h1>
            </div>

            <!--Navbar-->
            <div id="navbar_container"> 
            <div class="navbar_links">
            </div>
            </div>


        </div>
        <!--Current Page Contents-->
        <div id="currentpage_content">
            <p> #currentpage_content</p>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>

    </div>

    <!--Right-side Every-page Content-->
    <div id="rightside_container">
        <div id="register_container"><p> #register_container </p></div>
        <div id="contacts_content"><p> #contacts_content</p></div>
    </div>


</div>
</body>


</html>

我的目标是： enter image description here

（模糊文本替代：register_container将rightside_container填充到navbar_container底部的高度。并且contact_content填充rightside_container的其余部分，因为current_page内容在leftside_container上执行。）

我认为我遇到了一些麻烦，因为我想要做的浮动......我不知道为什么register_container / contacts_content左边有空黄色空间。也不是为什么我可以为header_title而不是register_container指定高度。

非常感谢任何帮助！

Answer 1

我认为你在宽度和高度字段中给出的值有一些小问题。

这对我来说很好。

<!DOCTYPE HTML>
<html lang="en">

<style>

* {margin: 0; padding:0;}
body
{
    font: normal 100% Helvetica, Arial, sans-serif;
    background-color: LightSkyBlue;
    margin: 0 auto;
    max-width: 90%; 
    height: auto;
}

#central_container
{
    background-color: Yellow;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    float: left;
}
#leftside_container
{
    background-color: Ivory;
    float: left;
    width: 66%; 
    clear: left;
}
    #header_container
    {
    background-color: DeepSkyBlue;
    width: 100%;
    height: 15em;
    }
        #header_title
        {
            background-color: Lime;
            width: 100%;
            height: 80%;
        }
            #header_title h1{ padding: 0; margin: 0; }

        #navbar_container
        {
            background-color: Coral;
            width: 100%;
            height: 20%;
        }
            .navbar_links{ background-color: HotPink; }

        #currentpage_content
        {
            background-color: grey;
            width: 100%;
            height: 20%;
        }

#rightside_container
{
    background-color: Khaki;
    float: right;
    width: 34%; <!--/* 320 /960 */-->
}
    #register_container
    {
        background-color: LightPink;
        width: 100%;
    height:240px;
    }
    #contacts_content
    {
        background-color: SeaGreen;
        width: 100%;
height:250px;
    }

</style>


<head>
    <title>Verge Green IT</title>
    <link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>


<body>
<div id="central_container">


    <!--Left-side Current-page Content-->
    <div id="leftside_container">

        <!--Header-->
        <div id="header_container">

            <div id="header_title">
            <h1>#header_title</h1>
            </div>

            <!--Navbar-->
            <div id="navbar_container"> 
            <div class="navbar_links">
            </div>
            </div>


        </div>
        <!--Current Page Contents-->
        <div id="currentpage_content">
            <p> #currentpage_content</p>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>

    </div>

    <!--Right-side Every-page Content-->
    <div id="rightside_container">
        <div id="register_container"><p> #register_container </p></div>
        <div id="contacts_content"><p> #contacts_content</p></div>
    </div>


</div>
</body>


</html>

将所有边距/填充设置为0，我仍然遇到CSS布局问题

1 个答案: