CSS 100% width on browser resize -


Hi all I am trying to create a layout using CSS and I'm coming up against a strange problem.

It's strange for me that I have 3 divs header , a footer and a main content area should have header and footer in a fixed width of 100%, while the main content area should be centered at 996 px; It's all right, but when I change the size of the browser window to a width of less than 996 px, and then the content of the window starts to shorten the headers and footers to 100% and is no longer 100%. I have knocked down the script of a small bare bone to clarify this problem (to keep the style inline compact) I know that I can add overflow: until the window is resized, the scrollbar is closed To be hidden in each container I have written a small piece of jQuery so that the width of the div can be returned, if the width is a fixed width Decreases e. Although my question is around CSS, is there a better pure CSS fix for this issue? Or can someone explain why this happens? Thank you in advance! Dotsi 

  & lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Title & gt; Div width test & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body style = "border: none; margin: 0; padding: 0; height: 100%; width: 100%" & gt; & Lt; Div id = "header-content" style = "width: 100%; margin: 0; padding: 0; background color: # 0000ff; height: 50px" & gt; & Lt; / Div & gt; & Lt; Div id = "main-content" style = "width: 996 px; margin: 0; padding: 0; background-color: #ffaff; height: 250px; margin: auto" & gt; & Lt; Div id = "inner-content" & gt; The content of the page here & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer-content" style = "width: 100%; margin: 0; padding: 0; background color: # 00ffff; height: 70px" & gt; & Lt; / Div & gt; & Lt; / Body & gt;

I am not completely clear about your problem, But you minimum-width: 996 px; can be set to the title and footer so that they can expand at least in content.


Comments

Post a Comment