Why is the right side running out of the browser size?

Question

The right side of the container runs out of the browser and a scroll-bar shows up.

How can i adjust to be just fit in the browser? And the bottom does not reach the bottom of the browser... Any idea?

.container {
  border: 1px solid #ffffff;
  margin-top: 60px;
  margin-left: 200px;
  min-width: 100%;
  min-height: 100%;
  position: absolute; 
}

Well, you have set margins? Is this intentional? Remove margins, if you want to remove scrollbar. — sinisake, Nov 19 '16 at 10:24
I think that more code is needed here... That `margin-left` is making the horizontal scroll bar appearance... — Anfuca, Nov 19 '16 at 10:24
removed margins, but still there the scroll-bar, and still running out of the browser — vinya, Nov 19 '16 at 10:29
https://jsfiddle.net/2sxkxx0r/ @vinya, is this what you need? Notice usage of box-sizing (so border is counted as a part of div width/height) — sinisake, Nov 19 '16 at 10:31

score 1 · Answer 1 · answered Nov 19 '16 at 10:28

You have set min-width: 100% AND margin-left: 200px which ends up in a total of 100% + 200px, which ends with a horisontal scrollbar.

If you WANT the margin, AND the size to be the rest of the size of the window, you can do this: max-width: calc(100% -200px); and just keep the rest the same.

Only works in relatively new browsers.

Johannes · Answer 2 · 2016-11-19T11:45:02.377

1

Use min-width: calc(100% - 202px); to include the margin and borders you defined in the width.

For height, make sure all parent elements have defined heights, which can also mean you have to add body, html: height: 100%; . In this case also add box-sizing: border-box;, but then the width setting above should be min-width: calc(100% - 200px);, since border-box already includes the border in the width.

edited Nov 19 '16 at 11:45

answered Nov 19 '16 at 10:33

Johannes

64,305
18
73
130

score 1 · Answer 3 · answered Nov 19 '16 at 10:38

1

if You Use border with width:100% then you have to use box-sizing:border-box;

position: absolute;
top: 60px;
left:0px;
min-width: 100%;
min-height: 100%;
border: 1px solid #ffffff;
background:red;
box-sizing:border-box;

answered Nov 19 '16 at 10:38

Ayatullah Rahmani

892
5
13

Why is the right side running out of the browser size?

3 Answers3