Side menu with fixed width and content 100%

Asked

Viewed 1,254 times

1

I’m working on a project, which my side menu has 300px and mine content has 100% relative to my menu.

I apply the following style:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
}

.content {
  position: absolute;
  top: 0;
  left: 300px; /* Para que fique ao lado do menu */
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

But when I apply this to the site, the class content gets bigger, and the scroll to view the rest. I want the content stay 100%, but relative with the menu of 300px.

Follow the link, so you can see: http://codepen.io/anon/pen/lwLHJ

html5 css3

  • Welcome to the site! You could [Dit] your question by selecting the code snippets and clicking the button {} editor to format them properly? Thank you!

  • Maybe you should stop using the word "relative," because if you are, you are already right. You are simply doing the .content of the width of the window and moving it to the right 300 pixels. You should look up some books on HTML + CSS to study first, because you have no idea what you’re doing.

2 answers

3

0

No. content you can add the following:

.content {
   width: calc(100% - 300px);
   position: relative;
   margin-left: 300px;
}

Do not put . content as position: Absolute, because if there is content, it does not follow its dimensions.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.