CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

StackOverflow https://stackoverflow.com/questions/20699638

  •  20-09-2022
  •  | 
  •  

문제

I've wasted now almost a day trying to solve this small but annoying issue I'm facing with a project I'm working on, so I thought to give stackoverflow a try. After all, I've found so often solutions to my problems in the existing threads, but this time I didn't seem to find anything applicable to my present problem.

I've got a pretty simple layout going on where the main content is a feed which will change based on the choices the user makes on the menu. The feed content is data represented in tabular form which scales quite flexibly with the container up to a point. Because the menu needs to be accessed often, it has been positioned as a fixed box on the left (relative to the left edge of the body) to keep it always in sight while scrolling down the feed.

Stripped to its bare bones, the setup look like this:

<body>
<div id="menu-wrapper"> {{menuhtml}} </div>
<div id="content-wrapper"> {{feedcontent}} </div>
</body>

Now, I've got a media query going on to switch the layout so that the menu changes from portrait to landscape and goes to float on the top of the viewport instead of left once the viewport width is less than 600 px, and this works like a charm, but my problem is in getting the default layout to behave in a desired way while the window width is something between 940px (the full width) and 600 px.

The desired way is to get the feed div to resize dynamically with the window and not to introduce horizontal scrollbars which make the feed slide under the menu with fixed position. I've figured out that likely this is an issue with how I'm positioning the content div, but the answer eludes me.

If I try to position the content div statically with margin-left: 240px; or relatively with a left translation position: relative; left: 240px; I get the same result: It resizes, but not in desired way. Once I resize the window, I first get a horizontal scrollbar and only once the size of the left indent has been first swallowed under the right edge of the browser window does the content div begin to scale with the window. For the relative approach I understand that this is because the placeholder of the div still stays where it would statically be and is resized only when the placeholder would be resized, but I was rather surprised that using a margin-left had the same results.

If I try to position it with float: right;, it follows obediently the approaching right edge of the browser window, but instead of resizing, it slides under the menu and begins only resizing once it reaches the left edge of the body.

Finally, if I try to position it with position: absolute; right: 0;, it seems to assume the entire viewport as its containing object instead of body and fills the entire width of the screen. (which I find strange since eveyrthing I know of the positioning model tells me that it should inherit the initial position from the body element)

The positioning part of the CSS is below (I've omitted fonts, backgrounds, colors & such)

body
{
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 0 20px;
}

div#menu-wrapper
{
    position: fixed;
    top: 120px;
    min-width: 180px;
    min-height: 180px;
    padding: 10px;
}

div#content-wrapper
{
    margin-top: 120px;
    max-width: 600px;
    min-width: 300px;
    width: 100%;
    /* SOME POSITIONING HERE */
}

Oh, and everything that comes inside the content-wrapper (another div with some decorations which in turn holds the table with the actual content) is statically placed and has either no width definition or width: 100%;

I would really appreciate any help on this one. I can't believe that I would have to resort to html tables and risk simplicity or to javascript and risk compatibility to make something seemingly so simple work! Thanks in advance!

도움이 되었습니까?

해결책

I seem to have managed to solve my own problem, so here it is to share with the community. Like most of the time, often we fail to see the obvious solution because of its simplicity.

Here I was all this time trying to fight the div out of the natural flow because of the menu, while actually just letting it stay in its static place under the menu works perfectly well, once I introduce padding instead of margin to get the content out of the way of the menu...

So I just got rid of all position and width definitions (because it seems the max-width messed up the result when I for the first time tried something on these lines), which resets the content wrapper back to the standard behavior where it occupies all the available horizontal space in its place in the document flow, and gave it a padding. It looks like this and works exactly like I wanted.

#content-wrapper{
    margin-top: 10px;
    min-height: 300px;
    padding-left: 220px;
}

A humblingly simple and efficient solution.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top