Question

我无法弄清楚为什么我的代码会在我的标题和内容之间分隔一个空格。此外，我希望我的侧边栏的黄色背景延伸到页面的底部，而不是在我完成链接之后。我该如何解决这些问题？！

这是一张它的样子：

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>DownloadThis</title>
<link href="myStyle.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="container">
    <div class="header">
      <h1>DownloadThis<FONT COLOR="#FFFFFF"> Music Store</FONT><img src="../images/logo.png" alt="Even unicorns love our music"></h1>
    <!-- end .header --></div>
<div class="sidebar">
  <ul>
    <li><a href="adminlist.jsp">Home</a></li>
    <li><a href="search.jsp">Search</a></li>
    <li><a href="cart.jsp">Shopping Cart</a></li>
    <li><a href="logout.jsp">Logout</a></li>
  </ul>
<!-- end .sidebar --></div>

<div class="content">
<!-- end .content --></div>

我的CSS：

.container {
    width: 80%;
    height:100%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FFF;
    margin: 0 auto;
}

.header {
    background-color: rgba(255,130,255,.8);
    height:100%;
    margin: 0 auto;
}

.sidebar {
    float: left;
    width: 20%;
    height:100%;
    background-color: #FFFF99;
}

.content {
    width: 80%;
    height: 100%;
    background-color: rgba(238,233,233,.8);
    text-align: left;
    padding: 10px 0;
    float: left;
}

Answer 1

以下是我如何处理您的布局：

http://jsfiddle.net/xfaTA/

HTML

<div class="container">
    <div class="header">
      <h1>
          DownloadThis
          <span>Music Store</span>
          <img src="../images/logo.png" alt="Even unicorns love our music">
      </h1>
    </div>

    <div class="sidebar-content-container">
        <div class="sidebar">
            <ul>
                <li><a href="adminlist.jsp">Home</a></li>
                <li><a href="search.jsp">Search</a></li>
                <li><a href="cart.jsp">Shopping Cart</a></li>
                <li><a href="logout.jsp">Logout</a></li>
            </ul>
        </div>

        <div class="content">
            content
        </div>
    </div>
</div>

CSS

.container {
    width: 80%;
    height:100%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FFF;
    margin: 0 auto;
}

.header {
    background-color: rgba(255,130,255,.8);
    height:100%;
    margin: 0 auto;
}

.header h1 span {color:#fff;}

.sidebar-content-container { overflow:hidden; }

.sidebar {
    float: left;
    width: 20%;
    height:100%;
    background-color: #FFFF99;
}

.content {
    width: 80%;
    height: 100%;
    background-color: rgba(238,233,233,.8);
    text-align: left;
    padding: 10px 0;
    float: left;
}

Answer 2

标题和内容之间的空格是由于h1的边距

.header h1 {
    margin: 0;
}

您可以在将来使用Firebug或Opera Dragonfly或其他类似工具找到类似的错误。

height: 100%无法解决问题，因为它只意味着100％的父元素＆＃34;。因此，您无法获得整个文档的拉伸和灵活高度。

我以这种方式更改您的代码：

<!--div class="container"--> <!-- deleted -->
  <div class="header">
    <h1 colspan="2">DownloadThis<FONT COLOR="#FFFFFF"> Music Store</FONT><img src="../images/logo.png" alt="Even unicorns love our music"></h1>
  </div>

  <div class="container"> <!-- moved here -->
    <div class="sidebar">
      <ul>
        <li><a href="adminlist.jsp">Home</a></li>
        <li><a href="search.jsp">Search</a></li>
        <li><a href="cart.jsp">Shopping Cart</a></li>
        <li><a href="logout.jsp">Logout</a></li>
      </ul>
    </div>

    <div class="content">
      <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    </div>
  </div>
<!--/div--><!-- missed in the original code -->

CSS（用连字符标记的已删除属性）：

.container {
    width: 80%;
    -height:100%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FFF;
    margin: 0 auto;
}
.header {
    background-color: rgba(255,130,255,.8);
    -height:100%;
    margin: 0 auto;
}
.sidebar {
    -float: left;
    width: 20%;
    -height:100%;
    background-color: #FFFF99;
}
.content {
    width: 80%;
    -height: 100%;
    background-color: rgba(238,233,233,.8);
    text-align: left;
    padding: 10px 0;
    -float: left;
}

/* to be added */
.header{
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
}
.container {
    display: table;
}
.sidebar, .content{
    display: table-cell;
}

BTW，floats是邪恶的。不要把它们放在任何地方。只有在真正需要的时候才能使用它们。

Answer 3

尝试将内容和侧边栏边距设置为

margin-top:0;

Answer 4

将position: absolute;添加到.sidebar。至于白色空间，它似乎与标题上的图像有关。

Demo

我无法弄清楚为什么我的代码正在分隔我的标题和内容的空白区域

4 个答案: