Html 我能'；我不明白为什么我的代码会在标题和内容之间留一个空格_Html_Jsp

Html 我能'；我不明白为什么我的代码会在标题和内容之间留一个空格

html jsp

Html 我能'；我不明白为什么我的代码会在标题和内容之间留一个空格,html,jsp,Html,Jsp,我不明白为什么我的代码在标题和内容之间留了一个空格。另外，我希望侧边栏的黄色背景延伸到页面底部，而不是在我完成链接之后。我怎么能修好这些东西下面是一张它看起来像什么的图片：以下是我的HTML代码： <!DOCTYPE html> <html> <head> <title>DownloadThis</title> <link href="myStyle.css" rel="stylesheet" type="text/css

我不明白为什么我的代码在标题和内容之间留了一个空格。另外，我希望侧边栏的黄色背景延伸到页面底部，而不是在我完成链接之后。我怎么能修好这些东西

下面是一张它看起来像什么的图片：

以下是我的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>

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

margin-top:0;

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

HTML

添加

位置：绝对位置到.sidebar。至于空白，这似乎与头上的图像有关
标题和内容之间的空格是由于h1
的边距造成的
.header h1 {
    margin: 0;
}

您可以在将来使用Firebug或Opera Dragonfly或其他类似工具找到类似的bug
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 -->

顺便说一句，浮动是邪恶的。不要把它们放在任何地方。只有在真正需要的时候才应该使用它们
.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;
}

.header h1 {
    margin: 0;
}

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

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