All geek questions in one place

Div width: 100% will exceed the border of the browser window

here is my code:

<body style="width:100%; height:100%; margin:0px">
<div id="horizontal-bar" style="width:100%; height:34px; border: 10px solid;"></div>

here is my screenshot: enter image description here

# the horizontal frame on the right is not displayed, how to do # the horizontal panel is completely displayed in the browser window if css cannot do this? can i do this in js?

+4
source share
2 answers

Here you need to use box-sizing: border-box, because it is borderalso part of the block model:


(source: codemancers.com )

Excerpt

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#horizontal-bar {
  width: 100%;
  height: 34px;
  border: 10px solid;
  /* Add This */
  box-sizing: border-box;
}
<div id="horizontal-bar"></div>
Run codeHide result

Your old broken code for comparison:

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#horizontal-bar {
  width: 100%;
  height: 34px;
  border: 10px solid;
}
<div id="horizontal-bar"></div>
Run codeHide result

+8
source

use this code:

<script type="text/javascript"> var w = $(window).width(); $('.horizontal-bar').css('width', w); </script> <body style="width:100%; height:100%;margin:0px"> <div id="horizontal-bar" style="height:34px; border: 10px solid;"></div>

-2
source

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

More articles:


All Articles