Question

我正在进行2列网页布局。我想制作一个占据页面高度100％的边框。我尝试了一些不同的东西，但是我得到了相同的结果，只有在有内容时才会添加边框。任何人都有这方面的建议吗？

HTML

<body>
    <div id="top">
        <nav>
            <a class="navitem" href="#">Stream</a>
            <a class="navitem" href="/discover">Discover</a>
        </nav>
                <form action="#" class="form-wrapper cf">
                <input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required>
                <button type="submit">Search</button>
                </form>    
    </div>

<div id="wrapper">


<div id="content"> 
<h1> Content</h1>
</div>

<div id="divider"></div>

<aside>
<h1>right bar</h1>

<footer>
<nav>
<a class="navitem_footer" href="/contact">Contact</a>
<a class="navitem_footer" href="/about">About us</a>
<a class="navitem_footer" href="/premium">Premium</a>
</nav> 
</footer>

</aside>

</div>

</body>

CSS

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}

#content {
    width: 600px;
    float: left;
}

#divider {
        position: absolute;
    overflow: hidden;
    left: 900px;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(192,192,192,0.6);
    }
aside {
    float:right;
    width: 390px;
}

footer {
    height: 50px;
    clear: both;
    position:fixed;
    bottom:0;
}

提前谢谢。

我现在正在边境工作，但它覆盖了我的标题和我试图隐藏溢出但是没有用。

屏幕截图：http://i62.tinypic.com/2czbp6s.png

Answer 1

为此，您可以使用标签轻松将主页分为2列和链接将是您的HTML页面代码：

<!DOCTYPE html>
<html>

<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000>
  <frame src="first_page.html" frameborder="1">
  <frame src="second_page.html" frameborder="1">
</frameset>

</html>

对于100％边框，您可以使用以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
 </style>
  <!--[if IE 6]>
  <style type="text/css">
    #wrapper {
      width: expression((m=document.documentElement.clientWidth-10)+'px');
      height: expression((m=document.documentElement.clientHeight-10)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="wrapper">
    <!-- just a large div to get scrollbars -->
    <div style="width: 9999px; height: 9999px; background: #ddd"></div>
  </div>
</body>
</html>

2栏网站侧栏全高

1 个答案: