堆栈内存溢出
  简体   繁体   English

我不知道为什么我的代码在空白处分隔标题和内容

[英]I can't figure out why my code is making a white space separating my header and content

 原文  2012-11-03 15:40:30  4   4    html/ jsp

问题描述

I can't figure out why my code is making a white space separating my header and content. 我不知道为什么我的代码在空白处分隔标题和内容。 Also, I want the yellow background of my sidebar to extend to the bottom of the page, not after I'm done with the links. 另外，我希望侧边栏的黄色背景延伸到页面底部，而不是在完成链接之后。 How can I fix these things?! 我该如何解决这些问题？

Here's a picture of what it looks like: 这是它的外观图：

http://imgur.com/Jk35O

Here's my HTML code: 这是我的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>

And my CSS: 而我的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 个解决方案

解决方案1
 1  2012-11-03 15:49:28

Here is how I would approach your layout: 这是我如何处理您的布局：

http://jsfiddle.net/xfaTA/ http://jsfiddle.net/xfaTA/

HTML 的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 的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;
}​

解决方案2
 1  2012-11-03 17:19:12

The space between header and content is because of h1 's margins 标头和内容之间的间隔是由于h1的边距 

.header h1 {
    margin: 0;
}

You can find similar bugs in future using Firebug or Opera Dragonfly or other similar tool. 您将来可以使用Firebug或Opera Dragonfly或其他类似工具找到类似的错误。

height: 100% can't solve the problem, because it just means "100% of parent element". height: 100%无法解决问题，因为它仅表示“父元素的100％”。 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): 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 are evil. 顺便说一句， floats是邪恶的。 Don't put them everywhere. 不要把它们放到任何地方。 They should be used only if really needed. 仅在确实需要时才使用它们。

解决方案3
 0  2012-11-03 15:43:34

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

margin-top:0;

解决方案4
 0  2012-11-03 15:56:56

Add position: absolute; 添加position: absolute; to the .sidebar. 到.sidebar。 As for the white space it seems to be sometihing to do with the image on the header. 至于空白，似乎与标题上的图像有关。

Demo 演示版

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我无法弄清楚为什么我的webheader div和我的标题div之间有空格？ - I can't figure out why there is a space between my webheader div and my header div? 错误：我的网站上方有难看的空白。 不知道为什么 - Bug: Ugly white space on top of my website. Can't figure out, why 无法弄清楚为什么我的标题的其余部分不会显示 - Can't figure out why the rest of my header will not show 我的 javascript 代码不会将元素推送到我的数组，我不知道为什么？ - My javascript code won't push elements to my array and I can't figure out why? 我的标题不是 100% 的屏幕宽度，我不知道为什么？ - My header isn't 100% the screen width and I can't figure out why? 我的代码中不断出现“未捕获范围”错误，我不知道为什么 - I keep getting an 'uncaught range' error in my code and I can't figure out why 我无法弄清楚我的html代码出了什么问题 - I can't figure out what is wrong with my html code 我不知道为什么我的clearfix无法正常工作 - I can't figure out why my clearfix isnt working 我不明白为什么我的代码不起作用 - I can't figure why my code does not work classList.add已停止我的代码运行。 我不知道为什么。 你是否可以？ - classList.add has stopped my code from running. I can't figure out why. Can you?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM