CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ksiomelo
ksiomelo

Reputation: 1908

Adding DIVs dynamically but keeping the container with fixed width and height

I want to add <div>some content</div> dynamically to a container BUT I want this container to have fixed height and width, i.e., the added divs should scale themselves to fit in the container (thus also avoiding scroll bar in the container).

Setting the height of the container to 100% doesn't seem to work, since it scales to accomodade the div's.

It's more or less what jsfiddle.net does with those four iframes (e.g. try adjusting your window size).

Is there a way of accomplishing this by CSS?

example code

<div class="container">
<div class="added"> Some content </div>
<div class="added"> Some content </div>
</div>

style

#container { height: 100%; width: 100% }
.added { min-height: 200px; min-width: 200px; }

Upvotes: 0

Views: 605

Answers (4)

vonsko
vonsko

Reputation: 395

try this:

#container { height: 500px; width: 200px; position: relative; overflow: hidden }
.added { position: absolute; width: 100%; height: 100%; }

Upvotes: 0

Evan
Evan

Reputation: 6115

why not reverse it? you say you want the container to have fixed height and width, but then you make it to have dynamic height and width.

#container { height: 500px; width: 500px } // or whatever
.added { height: 50%; width: 50%; }

Upvotes: 0

Galled
Galled

Reputation: 4206

jsfiddle.net uses iframes you can use overflow:scroll in #container, but #container { height: 100%; width: 100% } will depend of it parent element, so you can make:

#container { height: 500px; width: 200px; overflow:scroll }

Upvotes: 0

Alex Peattie
Alex Peattie

Reputation: 27697

Try setting your overflow to hidden:

#container { height: 100%; width: 100%; overflow: hidden; }

Upvotes: 1

Related Questions