-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

ヘッダーとコンテンツの間のスペースは、h1のマージンのためです

.header h1 {
    margin: 0;
}

今後、Firebug、Opera Dragonfly、またはその他の同様のツールを使用して、同様のバグを見つけることができます。

height: 100%「親要素の100％」を意味するだけなので、問題を解決することはできません。そのため、ドキュメント全体の伸縮性と柔軟な高さを得ることができません。

私はあなたのコードをこのように変更します：

<!--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;
}

ところで、floats悪です。それらをどこにでも置かないでください。本当に必要な場合にのみ使用してください。

于 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

position: absolute;.sidebarに追加します。空白に関しては、ヘッダーの画像と関係があるようです。

デモ

于 2012-11-03T15:56:56.920 に答える
0

コンテンツとサイドバーの余白を

margin-top:0;
于 2012-11-03T15:43:34.367 に答える