CODEWITHSUNDEEP
javascripthtmlcss
Aleksiev
Aleksiev

Reputation: 85

How to expand child <div> with 100% of body width?

I have something like this: 

<body>
    <div style="width:700px; margin:0 auto;">
        <div class="inner-div"></div>
    </div>
</body>

Is there a way to expand child div with class "inner-div", to 100% of body width?

Upvotes: 3

Views: 10070

Answers (8)

jmils
jmils

Reputation: 31

This is an old post but I found a better solution here: How can I expand a child div to 100% screen width if the container div is smaller?

So in this case it would be

.inner-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Upvotes: 3

ne0h
ne0h

Reputation: 11

Let me correct this a little bit.

You also need to give your stretching element some "min-width" value in pixels/em and (not necessary but good practice) give the body element a min-width, too.

i.e.:

body {
  min-width: 1000px;
}

.outer {
  width: 1000px;
  height: 200px;
  margin: auto;
}

.inner {
  position: absolute;
  min-width: 1000px;
  height: 100px;
  left: 0;
  right: 0;
}

If there is no min-width set and your HTML/CSS isn't built for a responsive site you can see an error at the inner DIV element when resizing the browser window. The property "width: 100%" makes the element stretch always to 100% browser window size. Therefore if the browser viewport gets smaller than the content and scrollbars appear, the inner DIV stays at the actual browser viewport size causing the appearance seems broken when you scroll the site.

You can try it here: http://jsfiddle.net/W4vum/

Try changing the "min-width" value at the ".inner" DIV in the example from 1000px to 100%, resize the window and scroll to the side, then you see it.

Upvotes: 1

Jannis
Jannis

Reputation: 7

To make this work in pure CSS all parent elements have to be position:static; (or without the position attribute, because static is default)

after that you can use Stefan's code

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

(corrected Ricola3D's Fiddle: http://jsfiddle.net/u8mJW/23/ )

Upvotes: 0

Besnik
Besnik

Reputation: 6529

Not with css only. Since you set a with of 700px for the parent the child inherits this. But you can do this with javascript. Here with jquery:

$(window).bind("load resize", function(){
  $('.inner-div').width($('body').width());
});

It works even if you resize the window.

Upvotes: 1

Ricola3D
Ricola3D

Reputation: 2442

A little example of how to do it with css, so it is the same in javascript with setting the attributes I guess : http://jsfiddle.net/u8mJW/.

Upvotes: 0

Anoop
Anoop

Reputation: 130

If you give width 100% to inner-div, it will fit the width of the outer div.

Upvotes: 0

Drakkainen
Drakkainen

Reputation: 1142

I have not tested this but it might work:

You need jQuery for this.

//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
    var bWidth = $("body").width():
    $(".inner-div").width(bWidth);
}

Upvotes: 1

Stefan
Stefan

Reputation: 114138

This makes inner-div stretch from left to right:

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

Upvotes: 7

Related Questions