Question

我遇到布局问题，尝试了解浮动以及如何定位元素。我对css / html很新。有人可以帮我理解这种布局是如何工作的。一些问题：

1）无法在不破坏布局的情况下更改页脚高度，页脚似乎被向上推。

2）当我通过chrome检查页面时，页脚div包含在＆＃39;包装内。当它在代码之外时它就是div。

3）向内容div添加填充似乎也打破了布局

<!DOCTYPE html>

<html lang="en">

<head>
    <title>DCW</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

    <!--NAV BAR -->

    <nav>
        <ul>
        <div class="float-left">
              <li><a class="active" href="default.asp">PD</a></li>
              <li><a href="news.asp">Projects</a></li>
              <li><a href="About.asp">About</a></li>
              <li><a href="Contact.asp">Contact</a></li>
          </div>
          <div class="float-right">
              <li><a href="#">Hire Us!</a></li>
          </div>
        </ul>

    </nav>

    <!-- HEADER -->

    <header>

        <div id="title_wrapper">

        </div>

    </header>

    <!-- BODY CONTENT -->

    <div id="wrapper">

       <div id="content">

           <div class="info">
             col1

           </div>

           <div class="info">
             col2

           </div>

        </div>

        <!-- SIDEBAR -->

        <div id="sidebar">

            <div id="sidebar-text">
                  content 2

            </div>

        </div>

      </div>

  <!-- FOOTER -->

   <footer>
     Footer

   </footer>

</body>

CSS：

html, body
{
 width: 100%;   
 height: 100%;
 margin:0;
 padding: 0;
}

p.thick {
font-weight: bold;
}

h1, p {
padding: 0;
margin: 0;
}



/*Nav */


nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

nav li {
float: left;
}

nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

.float-left {
float:left;
}
.float-right {
float:right;
}


/* Header */

header #title_text{

 font-size: 100px;
 font-family: arial;

}

header #title_wrapper{
text-align:center;
position: relative;
top: 200px;

}

header {

background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;




}

/*Content*/

#wrapper{

min-height: 70%;
height: auto;
height: 70%;

}

#content{
float:left;
width:100%;
height: 100%;
text-align: center;

}


#sidebar{

float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;

}

#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}



.img-circle {
border-radius: 50%;
}


.info{
width: 50%;
float: left;  
}


blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;

}  

/* footer */
footer{
background-color: orange;
}

干杯

Answer 1

我确实使用+ 200px页脚制作了一个+ 200px的填充内容。除了内容上的display:inline-block以及内容上的box-sizing: border-box;之外，我们没有更改任何内容。

＆＃13;

html, body
{
 width: 100%;   
 height: 100%;
 margin:0;
 padding: 0;
}

p.thick {
font-weight: bold;
}

h1, p {
padding: 0;
margin: 0;
}



/*Nav */


nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

nav li {
float: left;
}

nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

.float-left {
float:left;
}
.float-right {
float:right;
}


/* Header */

header #title_text{

 font-size: 100px;
 font-family: arial;

}

header #title_wrapper{
text-align:center;
position: relative;
top: 200px;

}

header {

background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;




}

/*Content*/

#wrapper{

min-height: 70%;
height: auto;
height: 70%;

}

#content{
float:left;
width:100%;
height: 100%;
text-align: center;
padding:100px;
box-sizing: border-box;
}


#sidebar{

float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;

}

#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}



.img-circle {
border-radius: 50%;
}


.info{
width: 50%;
float: left;  
}


blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;

}  

/* footer */
footer{
display: inline-block;
background-color: orange;
height:200px;
width: 100%;
}

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>
    <title>DCW</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

    <!--NAV BAR -->

    <nav>
        <ul>
        <div class="float-left">
              <li><a class="active" href="default.asp">PD</a></li>
              <li><a href="news.asp">Projects</a></li>
              <li><a href="About.asp">About</a></li>
              <li><a href="Contact.asp">Contact</a></li>
          </div>
          <div class="float-right">
              <li><a href="#">Hire Us!</a></li>
          </div>
        </ul>

    </nav>

    <!-- HEADER -->

    <header>

        <div id="title_wrapper">

        </div>

    </header>

    <!-- BODY CONTENT -->

    <div id="wrapper">

       <div id="content">

           <div class="info">
             col1

           </div>

           <div class="info">
             col2

           </div>

        </div>

        <!-- SIDEBAR -->

        <div id="sidebar">

            <div id="sidebar-text">
                  content 2

            </div>

        </div>

      </div>

  <!-- FOOTER -->

   <footer>
     Footer

   </footer>

</body>

＆＃13;

Answer 2

没有必要为html提供宽度和高度为100％，而css宽度中的div或div默认为100％。您只能在需要时提及宽度。

为页脚提供高度只需添加清除：两者都是页脚选择器

footer {background-color：orange; clear：both; height：50px;}

这将解决问题1＆amp; 2.当您添加填充时，设计会中断，因为每次添加宽度时，它都会保持添加到已经赋予相同div或元素的当前宽度。这可以通过重新调整元素宽度或使用box-sizing：border-box来解决。

布局问题（浮点/填充）

2 个答案: