-1

我不明白为什么我的代码会用空格分隔标题和内容。另外，我希望边栏的黄色背景延伸到页面底部，而不是在我完成链接之后。我该如何解决这些问题？！

这是它的样子：

http://imgur.com/Jk35O

这是我的 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;
}
4

4 回答 4

1

The space between header and content is because of h1's margins

.header h1 {
    margin: 0;
}

You can find similar bugs in future using Firebug or Opera Dragonfly or other similar tool.

height: 100% can't solve the problem, because it just means "100% of parent element". So with that you just can't get stretching and flexible height of the whole document.

I'd change your code this way:

<!--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 (deleted properties marked by hyphens):

.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 are evil. Don't put them everywhere. They should be used only if really needed.

于 2012-11-03T17:19:12.933 回答
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;
}​
于 2012-11-03T15:49:28.750 回答
0

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

margin-top:0;
于 2012-11-03T15:43:34.367 回答
0

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

演示

于 2012-11-03T15:56:56.920 回答