Ly Maneug Ly Maneug - 1 month ago 6
HTML Question

How to keep content within the view?

I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear.

How can I keep the content within the browser and not have the content overflow with scroll bars appearing?

Here is the code:

<div id="container">
<h1>
Content inside
</h1>
<div>
I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, t
</div>

Answer

by simply adding to body

overflow: hidden;

and making sure to use

box-sizing: border-box;

or removing width:100%;

box-sizing:border-box; fixes the issue of having a 100% width padded - placing the paddings within the box model of your element.

*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}

body{overflow:hidden;}

#container {
  background-color: white;
  min-height: 100%;
  padding: 30px; 
}
  <div id="container">
      <h1>
        Content inside
      </h1>
      <div>
        I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. I currently have a container and a content inside. When the browser gets minimized, the content inside overflows, and the scroll bars appear. 
      </div>
  </div>

jsBin demo