CSS - Enable "auto expand" of absolutely positioned DIV when content extends beyond width/height parameters
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.
加载中,请稍侯......
精彩评论