skip to Main Content

I want to make standard layout with header, content (main area and aside sidebar) and footer. The right sidebar has background-color not only inside them but this background I want to make overflow on all body (inlcude header and footer).

It should looks like:
enter image description here

My idea was created it by absolute block :before sidebar but when I’m positioning it absolute with overflow body it makes scrolls (vertical and horizontal).

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

code: http://jsfiddle.net/cichy380/yrk40e1h/1/ (based on Twitter Bootstrap)

Maybe you have better idea or you can fix my code?

3

Answers


  1. You can use position:fixed with vw/vh or you can simply but the before on the body with height:100% and the same width (%/px) as the sidebar.
    http://jsfiddle.net/yrk40e1h/4/

    Login or Signup to reply.
  2. I’ve created new code for you. Please follow this. May this help you.

    * {
      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>
    Login or Signup to reply.
  3. You should avoid the kind of -9999px and stuff like that.

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

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

    The negative margin-left is here to deal with the bootstrap columns padding. Tried a few things to deal with this, if someone would have a cleaner solution than this negative margin, your comment is very welcome.

    The @media (min-width: 768px) is here to deal with the bootstrap responsive columns. Without this, when you scale down under 768px, all this :before would take all the body.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search