Side menu with fixed width and content 100%

Navigation
1

I'm working on a project, my side menu has 300px and my content is 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 content class gets larger, and scroll appears to see the rest. I want content to be 100%, but relative to the 300px menu.

Follow the link, so you can see: link

    
asked by anonymous 15.05.2014 / 16:27

2 answers

2

.content value 

width: auto;

Click here to see your changed code on Codepen.io.

Tip : Ideally, instead of the header tag you use the nav tag that has the true function of delimiting a menu in html5 .

15.05.2014 / 16:53
0

In .content you can add the following: 

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

Do not put the .content as position: absolute, because if there is content, it does not follow the dimensions of it.

    
03.01.2016 / 07:21
how to pass an array with N arguments to a bind_param inside a class? Error sending email: server response: 550 5.7.1 Must Authenticate