将所有边距/填充设置为0，I'；我仍然有CSS布局的问题_Css

将所有边距/填充设置为0，I'；我仍然有CSS布局的问题

css

将所有边距/填充设置为0，I'；我仍然有CSS布局的问题,css,Css,CSS初学者在这里，我对一个相对简单的CSS布局感到不知所措，希望有人能帮我检查一下我得到的是： CSS暂时嵌入，请原谅缩进（我刚开始编程，缩进帮助我理解它）： *{边距：0；填充：0；} 身体 { 字体：普通100%Helvetica，Arial，无衬线；背景色：淡天蓝；保证金：自动；最大宽度：90%； } #中央集装箱 { 背景颜色：黄色；宽度：100%；保证金：自动；浮动：左； } #左侧容器 { 背景颜色：象牙色；浮动：左；宽度：66%；清除：左； } #集箱 {

CSS初学者在这里，我对一个相对简单的CSS布局感到不知所措，希望有人能帮我检查一下

我得到的是：

CSS暂时嵌入，请原谅缩进（我刚开始编程，缩进帮助我理解它）：


*{边距：0；填充：0；}
身体
{
字体：普通100%Helvetica，Arial，无衬线；
背景色：淡天蓝；
保证金：自动；
最大宽度：90%；
}
#中央集装箱
{
背景颜色：黄色；
宽度：100%；
保证金：自动；
浮动：左；
}
#左侧容器
{
背景颜色：象牙色；
浮动：左；
宽度：66%；
清除：左；
}
#集箱
{
背景颜色：深蓝；
宽度：100%；
高度：15公分；
}
#标题
{
背景色：石灰；
宽度：100%；
身高：80%；
}
#标题标题h1{填充：0；边距：0；}
#navbar_集装箱
{
背景颜色：珊瑚；
宽度：100%；
身高：20%；
}
.navbar_链接{背景色：热粉色；}
#当前页面内容
{
背景颜色：灰色；
宽度：100%；
身高：20%；
}
#右侧集装箱
{
背景颜色：卡其色；
浮动：对；
宽度：33%；
}
#注册容器
{
背景颜色：浅粉色；
宽度：100%；
}
#通讯录内容
{
背景色：海绿；
宽度：100%；
}
绿边吗
#标题
#当前页面_内容
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔因疏忽而死亡外，还必须为动物的劳动负责。”
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不轻率的行为外，还必须为自己的行为负责。”
#登记#集装箱
#联系人#内容

我的目标是：

（模糊文本替代：register_容器填充右侧_容器，直到navbar_容器底部的高度。contact_内容填充右侧_容器的其余部分，就像当前_页面内容填充左侧_容器一样。）

我想我遇到了一些问题，因为我正在尝试做的是浮动。我不知道为什么在register\u容器/contacts\u内容的左侧有空白的黄色空间。也不知道为什么我可以指定标题等内容的高度，但不能指定register\u容器

非常感谢您的帮助！

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

这对我来说很好

<!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；填充：0；}
身体
{
字体：普通100%Helvetica，Arial，无衬线；
背景色：淡天蓝；
保证金：0自动；
最大宽度：90%；
高度：自动；
}
#中央集装箱
{
背景颜色：黄色；
宽度：100%；
保证金：0自动；
身高：100%；
浮动：左；
}
#左侧容器
{
背景颜色：象牙色；
浮动：左；
宽度：66%；
清除：左；
}
#集箱
{
背景颜色：深蓝；
宽度：100%；
高度：15公分；
}
#标题
{
背景色：石灰；
宽度：100%；
身高：80%；
}
#标题标题h1{填充：0；边距：0；}
#navbar_集装箱
{
背景颜色：珊瑚；
宽度：100%；
身高：20%；
}
.navbar_链接{背景色：热粉色；}
#当前页面内容
{
背景颜色：灰色；
宽度：100%；
身高：20%；
}
#右侧集装箱
{
背景颜色：卡其色；
浮动：对；
宽度：34%；
}
#注册容器
{
背景颜色：浅粉色；
宽度：100%；
高度：240px；
}
#通讯录内容
{
背景色：海绿；
宽度：100%；
高度：250px；
}
绿边吗
#标题
#当前页面_内容
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔因疏忽而死亡外，还必须为动物的劳动负责。”
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，我们必须尽可能少地工作
<!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>