Question: div width:100% will over the browser window border

Question

div width:100% will over the browser window border

Answers 2
Added at 2017-01-05 15:01
Tags
Question

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-bar right border doesn't show, how to make #horizontal-bar completely show in browser window, if css cannot do it? can i do it in js?

Answers to

div width:100% will over the browser window border

nr: #1 dodano: 2017-01-05 15:01

Here, you need to use the box-sizing: border-box because, border is also a part of the box model:

Snippet

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>

Your old, non-working code for comparison is:

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

nr: #2 dodano: 2017-01-05 15:01

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>

Source Show
◀ Wstecz