CSS: 100% real Width

Question

CSS: 100% real Width

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good morning. I have a body of 100% width and inside a div of the same width. The problem is that the div is taking 100% of the page visible and not 100% real.

That is, if I have the internet browser window changed in size, and the horizontal movement arrows appear, 100% of the div becomes the full width of the page that I am seeing at the moment , but it does not cover the part that I access with the arrows to the right.

.wrapper {
  width: 950px;
  margin: 0 auto;
  border: 0px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.header {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

<body style="background-image:url(img/bg.jpg); margin:0; padding:0; width:100% ">
  <div class=header style="background-color: rgba(0, 0, 0, 0.2); height:125px; ">
    <div class=wrapper style="width:950px; margin: auto; height:125 ">
      <img style=" width:200px;  float:left; position:absolute; top:20px;" src=img/dsd.png>
      <div id=boton style="position:absolute;  top:40; left:785">
        <a href="service.html"> <img src=img/service.png width=170/> </a>
      </div>
    </div>
  </div>
</body>

css3 css

asked by Facundo Díaz 14.04.2017 в 18:07

source

3 answers

doubt with angularjs modules and directives [closed] Values in Recyclerview are changed by scrolling down and returning

score 1 · Answer 1

What happens is called overflow and occurs when a child element exceeds the dimensions of its parent. This is normal for elements with fixed width, such as block elements or any element with a defined width. If you do not want an overflow to occur in the parent, then do inline-block or if you are using flexbox, inline-flex :

body {
  padding: 10px;
}

.parent,
.parent2 {
  background-color: tomato;
  padding: 25px;
  width: 50%;
}

.parent2 {
  display: inline-block;
  width: auto;
}

.child {
  background-color: gold;
  height: 50px;
  width: 80vw;
}

h3 {
  color: #444;
  font-family: sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

<h3>Con ancho fijo</h3>
<div class="parent">
  <div class="child"></div>
</div>

<h3>Con ancho relativo</h3>
<div class="parent2">
  <div class="child"></div>
</div>

score 0 · Answer 2

You should always take into account the father and his characteristics, you are giving a value of width: 100% to the father and he will always take 100% of the width of the screen but note that inside he has a child with class wrapper that has set a bit in px and this when adjusting other screen widths, always push and you will generate a scroll horizontal when the screen has a width less than 950px .

.wrapper {
  **width: 950px;**
  margin: 0 auto;
  border: 0px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

A possible solution is that if you want the%% of the parent's container to be%, you assign it as a percentage.

Now, if you are looking for other solutions you can do a % or adjust it using width: calc();

score 0 · Answer 3

try this way:

.wrapper {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  border: 0px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.header {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

I should do what I imagine you need;)

The last margin-bottom: 0px; you can also omit it since it is within the margin: 0px; of some lines up.

Greetings.