All geek questions in one place

DIV "100%" width scrolls to the right side of the page

I have a very simple layout with two DIVS: the fixed width of the left panel and the right area, which should occupy 100% of the remaining width. Both heights are 100%, and I want the right element to have a vertical scrollbar if the height is above the height of the window.

My current code occupies the entire browser window, but the correct area scrolls towards the visible area of ​​the browser on the right, and the vertical scroll bar is never displayed.

HTML:

<body> <form id="Form2" runat="server"> <div class="page"> <div class="clear hideSkiplink"> Left side stuff goes here.... </div> <div class="main"> Right size stuff goes here.... </div> </div> </form> </body>

CSS

 div.hideSkiplink { padding:20px; background-color:#990000; position:fixed; top:0px; left:0px; width:249px; height:100%; } div.main { padding: 10px; margin: 0px; background-color: #000000; color: #ffffff; position: fixed; top: 0px; left: 250px; width: 100%; height: 100%; }
+6
source share
5 answers

When you give something width:100% , it means "regardless of the width of my container, I will have the same width" - this does not mean "I will take 100% of the available space"

In other words, let your parent div be 300 pixels wide - if you give the child div width: 100% , it will be 100% of 300 pixels.

What you can do here, since your left column has a fixed width, adds a left margin to the right div.

 div.left { width: 249px; } div.right { width: 100%; margin-left: 249px; }
+6
source

Several times you need to set the margin in the body in CSS to 0.

EG.

 body {background-color:#000; margin-left:0px;}

By default, some browsers have a couple of indented pixels on the left side.

+1
source

Instead of filling the space with more space, why not just make the left panel completely unplaced, and the main content <div> fill the entire page, and padding-left move over the content?

0
source

A div with a width of 100% will fill the container in which it is located. Your container is 100% of the page width. It does not take into account the fact that you moved it 250 pixels to the right with absolute positioning.

the best choice:

.hosesiplink should appear after .main in the stream. Swim the .hosesiplink to the left, give it a width, and then give .main a margin-left corresponding to the width of the .hideskiplink.

0
source

I fixed my problem with this by setting the minimum width in the "body" to the same value as the width of my content inside this div.

0
source

Source: https://habr.com/ru/post/889898/

More articles:


All Articles