带有溢出背景颜色的侧边栏

时间：2015-07-28 10:15:19

标签： html css

我想用标题，内容（主要区域和侧边栏）和页脚进行标准布局。右侧边栏不仅有背景颜色，而且我想在所有正文（包括页眉和页脚）上溢出这个背景。

应该看起来像： enter image description here

我的想法是通过绝对块创建的：在侧边栏之前，但是当我将它放在绝对的溢出体时，它会产生卷轴（垂直和水平）。

aside.sidebar:before {
   content: "";
   display: block;
   position: absolute;
   background-color: #eee;
   top: -9999px;
   left: 0;
   bottom: -9999px;
   right: -9999px;
   z-index: -1;
}

代码：http://jsfiddle.net/cichy380/yrk40e1h/1/（基于Twitter Bootstrap）

也许您有更好的想法，或者您可以修复我的代码？

3 个答案:

答案 0 :(得分：2)

你应该避免使用G'(V', E') = G(V, Q) : Q = {x: x <= A and x belongs to E} 之类的东西。

http://jsfiddle.net/yrk40e1h/7/ 

-9999px

负@media (min-width: 768px){ .sidebar:before { content: ''; position: fixed; height: 100%; width: 100%; top: 0; background-color: #eee; overflow: hidden; margin-left: -15px; z-index: -1; } } 用于处理bootstrap 列填充。尝试了一些事情来处理这个问题，如果有人会有一个清洁解决方案，那么你的评论非常受欢迎。

margin-left用于处理引导响应列。如果没有这个，当你在 768px 下缩小时，所有这些@media (min-width: 768px)都将占据全部。

答案 1 :(得分：0)

您可以将position:fixed与vw/vh一起使用，或者您可以简单地使用height:100%与身体之前的%/px和宽度（ret.Sum(x => x.Value.Count(y => y != 0)); ）作为侧边栏。 http://jsfiddle.net/yrk40e1h/4/

答案 2 :(得分：0)

我为您创建了新代码。请关注此。愿这对你有所帮助。

* {
  padding: 0;
  margin: 0;
}
.wrapper {
  overflow: hidden;
}
main:after {
  content: '';
  clear: both;
  display: table;
}
aside {
  float: right;
  width: 300px;
  position: relative;
}
aside:before {
  content: '';
  background: #f1f1f1;
  position: absolute;
  top: -99999px;
  right: -99999px;
  bottom: -99999px;
  left: 0;
  z-index: -1
}
.left-content {
  overflow: hidden;
}
<div class="wrapper">
  <header>
    <h1>Header</h1>
  </header>
  <main>
    <aside>
      <h3>Sidebar here</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
    </aside>
    <div class="left-content">
      <h2>Main content here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget accumsan risus. Curabitur ac velit nec dui fringilla sodales et feugiat massa. Nullam nec luctus elit. Integer sed fermentum lorem. Nullam consequat elit nunc. Integer eget condimentum
        turpis. Quisque egestas ultricies ultricies. Nunc laoreet, tellus at euismod imperdiet, justo enim faucibus ex, at ultrices urna enim id augue. Donec ut dolor eros. Fusce sagittis euismod justo, eu ultricies ex. Vestibulum quis dolor auctor mauris
        porttitor pretium.</p>
    </div>
  </main>
  <footer>
    <h4>Footer</h4>
  </footer>
</div>

相关问题
最新问题