CODEWITHSUNDEEP
csshtmlwidth
pencilCake
pencilCake

Reputation: 53223

How can I set a <div> to the width of the browser window on page load (i.e. so it stays the same width when the browser window is resized)

When I set a width of a <div> that wraps all page by 100%, whenever I resize the window the <div> resizes as well.

What I want to achieve is, for whatever browser and screen you open the page, I want the div to have the widh of the 100% of the full window and stay it as it was set, so that when you resize the window, the div size will still be the same.

Is it possible?

Upvotes: 3

Views: 1202

Answers (3)

Tom
Tom

Reputation: 5201

Use jQuery's onload to retrieve the calculated width after loading, then set it as the div's defined width:

$(function() {
    var width = $("#mydiv").width();
    $("#mydiv").width(width);
});

Upvotes: 0

Riz
Riz

Reputation: 10236

You can do this using jQuery as:

winW = $(window).width();

$('#container').css('width', winW);

Upvotes: 3

Emil
Emil

Reputation: 8527

You should set the width to be 100% in your css, and then use a JavaScript onLoad function to override it to pixels. Your users should not notice it.

You can find many examples of the JavaScript code.

Upvotes: 1

Related Questions