CSS边框高度100%?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (209)

HTML:

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

CSS:

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

我希望侧边栏在高度与我的页面内容,并留下边栏底部的图像始终在底部的侧边栏。

提问于
用户回答回答于

可以使用Faux columns 技术。

通过如何计算高度属性,不能对具有自动高度的内容设置height: 100%

热门问答

求云函数可用的Pandas压缩包,一直失败,出现多个C extension问题?

配置 https 配置完后报错?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐已采纳

请检查服务器是否安装了代理?如有请尝试移除代理再尝试

另外,curl访问https时候需要确保服务器已经保存了证书,可以通过 curl -k --tlsv1 过滤

即时通信是否可以给小程序发送小卡片消息?

都快要考试了,从业者认证考试的准考证怎么还没发放?

您好,本月正式考试通知已经全部发送完毕。已安排考试中心重新为您发送,请注意查收站内信、邮件、短信及腾讯云助手公众号消息 如有疑问,可联系考试中心; 电话:400-8006213/13810321135 邮箱:qcloud@ats.org.cn... 展开详请

为什么绑定了域名之后的企业邮箱发送到Gmail被事儿别为垃圾邮件?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐
可以通过设置DMARC来解决邮件被其他邮局识别为垃圾邮件的问题 TXT记录值为:v=spf1 include:spf.mail.qq.com ~all 详细参考记录: https://work.weixin.qq.com/help?person_id=1&doc_id=524&h...... 展开详请

腾讯云cos如何通过api获取文件的永久url?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐
如果文件是公有读的,那直接拼路径即访问URL,格式如 https://<Bucket>.cos.<Region>.myqcloud.com/<Key> ,不需要接口。 如果使用的sdk,比如js sdk,则可以使用 getObjectUrl 方法 var url = cos.ge...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券