CSS - Enable "auto expand" of absolutely positioned DIV when content extends beyond width/height parameters_问答_开发者

CSS - Enable "auto expand" of absolutely positioned DIV when content extends beyond width/height parameters

开发者 https://www.devze.com 2023-03-20 07:48 出处：网络

Kind of a weird example, but here goes: How do I get an absolutely positioned DIV to expand w开发者_JS百科hen content is inserted that goes beyond its borders? Here is the code:

Kind of a weird example, but here goes:

How do I get an absolutely positioned DIV to expand w开发者_JS百科hen content is inserted that goes beyond its borders? Here is the code:

<html>
<head>
    <style>
        * {margin: 0; padding: 0;}
        body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
        div#container {position: relative; height: 100px; width: 50px;}

        div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
        div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
        div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}        
        div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}

        span#title {position: relative; overflow: visible}
    </style>
</head>
<body>
    <div id="container">
        <div id="a"><span id="title">This is my title</span></div>
        <div id="b">B</div>
        <div id="c">C</div>
        <div id="d">D</div>
    </div>
</body>

In the example above, the content in DIV "a" is hidden (due to the width/height restrictions). If we set this to "min-height" and "min-width" the content just sits "behind" the other divs, but doesn't move them. How can I accomplish this?

Note: I'm trying to figure this out, as I need to "reposition" the order in which DIVs are ordered in the HTML (I'm trying to make a child template in Wordpress). Any examples/resources are GREATLY appreciated.

Cheers, Sapiensgladio

You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.

You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.

Example CSS:

#content {
    position: absolute;
    min-height: 5em;
    max-height: 15em;
    min-width: 5em;
    max-width: 15em;
    border: 1px solid #f90;
    bottom: 0.5em;
    right: 0.5em;
    overflow: auto;
}

JS Fiddle demo.

The above demo uses jQuery to add extra content to the #content div, but that's just for dynamic demonstration purposes, the jQuery is not, in any way, required for the css to work.