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

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; }

Try setting your overflow to hidden:
#container { height: 100%; width: 100%; overflow: hidden; }

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 }

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%; }

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

Related

How do I make a Vue component occupy the entire browser height?

I'm learning Vue 3 and I'm trying to make a simple sidebar for an app I'm trying to build
I have two divs: main and sidebar, and I have given both of them (and the body) height: 100%
However, the divs are not occupying the full height of the window.
This is my code:
<template>
<div class="sidebar">
sidebar
</div>
<div class="main">
hi
</div>
</template>
<style>
body {
height: 100%;
}
.sidebar {
width: 12%;
height: 100%;
float: left;
background-color: red;
}
.main {
margin-left: 12%;
height: 100%;
background-color: blue;
}
</style>
This is how the site looks at the moment.image
You could use height: 100vh instead of height: 100%.
vh itself means Viewport Height, if we use 10vh as the value, it will occupy 10% of the current viewport height. Since sidebar and main class is inside the body, the height will refer to the parent class, which is body. Hence, occupying 100% of the body class, which is 100vh.
<template>
<div class="sidebar">
sidebar
</div>
<div class="main">
hi
</div>
</template>
<style>
body {
height: 100vh;
}
.sidebar {
width: 12%;
height: 100%;
float: left;
background-color: red;
}
.main {
margin-left: 12%;
height: 100%;
background-color: blue;
}
</style>
For height in % to work, all parent elements much have a height set. In your case <body> has a % height of 100% but it's parent, HTML doesn't have a height set.
So your code should be
html, body {
height: 100%;
}
* <html> is an exception to this since it is the root and doesn't have a parent.
Another option is to use vh unit as mentioned in comments which is relative to the height of view port instead of parent, unlike the % unit.

Get x y position of element relative to parent div Jquery

Given the following markup:
<div class='container'>
<div class='inner'>
<div class='target'></div>
</div>
</div>
And styles:
.container {
width: 100%;
height: 100vh;
overflow: scroll;
}
.inner {
width: 3000px;
height: 2000px;
}
.target {
height: 200px;
width: 200px;
background: red;
}
How would I go about scrolling the .container with $('.container').scrollLeft(X) and $('.container').scrollTop(X) to center .target in the middle of the viewport?
I get it to work by playing around with static values but as soon as the size of the screen changes, e.g. on mobile or tablets, then the centering is off.
I've also tried doing:
$('.container').scrollLeft($('.target').position().left);
$('.container').scrollTop($('.target').position().top);
But this doesn't seem to work, the centering is way off. I dont' know if this is because the .target is contained in a div with overflow: scroll.
I hope I understood you correctly. I've added position: relative; to the .inner element and absolute to .target element and I calculated the position in jQuery based on the elements width's and height's. I hope this is what you need:
var x = $('.inner').width() / 2 - $('.target').width() / 2
var y = $('.inner').height() / 2 - $('.target').height() / 2;
$('.container').scrollLeft(x);
$('.container').scrollTop(y);
$('.target').css({
left: x,
top: y
});
.container {
width: 100%;
height: 100vh;
overflow: scroll;
}
.inner {
width: 3000px;
height: 2000px;
position: relative;
}
.target {
height: 200px;
width: 200px;
background: red;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='inner'>
<div class='target'></div>
</div>
</div>

Emulating a fixed sidebar template issues

am trying to emulate this theme:
http://themetrust.com/demos/ink/?project=the-city-of-samba
But instead make the blog post always remain centered in the right hand side (space outside of the fixed sidebar) and have the blog post be of a % width.
I currently have this set up on my site, but am using a percentage based sidebar which looks awful.
Here is a JSfiddle recreating in basic terms the theme from above:
http://jsfiddle.net/Uyv6w/4/
All i am after is to make that grey inner div always remain centered inside the red content div.
Incase JSFiddle goes down and for future ref:
HTML:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
width: 100%;
}
#sidebar {
height: 100%;
width: 100px;
background-color: #9b59b6;
position: fixed;
}
#content {
width: 100%;
background-color: #f00;
}
#inner {
width: 60%;
margin-left: 150px;
background-color: #888;
height: 1000px;
}
Thanks.
There are just 2 properties to change in ordre to make this work the way you want :
#content {
/* width: 100%; */
margin-left: 100px; /* the width of you sidebar.
Since #content is a div, a block-level element
, its width will be automatically 100%
, minus the margins */
background-color: #f00;
}
#inner {
width: 60%;
/* margin-left: 150px; */
margin-left: auto;
margin-right: auto; /* having margin-left & right set to auto will center your div.
you could also use "margin: 0 auto" */
background-color: #888;
height: 1000px;
}
I have updated you JSFiddle example here : http://jsfiddle.net/Uyv6w/5/
http://jsbin.com/requv/1/edit
if you set body, html (and the container) to height 100%, it will not be able to to scroll.
the height should be more then 100%.

Adjusting parent height containing absolute children

I am working on a form that has multiple pages that I would like to scroll in/out of view. I have to use absolute positioning to force the divs (pages) to scroll in a single line; however, this causes the parent divs height to not be responsive to the children (which have varying heights based on amount of content plus dynamic content being added to them).
How can I make the parents height be responsive to the children while still allowing my pages to scroll in a single line (I have already tried float)?
Is there anyway to achieve the same effect as the jsFiddle Demo without having to use absolute positioning?
Example: jsFiddle Demo <--- How do I make the toggle button remain below the divs no matter how tall they are?
#div1{
width: 500px;
height: 110px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 110px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
.container {
width: 800px;
position: relative;
height: 100px;
}
<p>some content here </p>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
<button>Toggle</button>
EDIT
Updated jsFiddle to show problem better.
You inspect the height and position of the child elements and calculate the total height and apply that to the parent. Absolutely-positioned elements have their own layout context, so CSS alone cannot solve this.
The height in #div1 and #div2 is causing an overflow of the .container div:
Set the height of #div1 and #div2 to the same height as its container:
#div1{
width: 500px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
Or set the .container to overflow:hidden:
.container {
width: 800px;
position: relative;
overflow:hidden
height: 100px;
}
Updated jsfiddle:
http://jsfiddle.net/FkNa2/193/
Depending on what you want, i Updated your fiddle:
Button position is fixed at document loading, based on height of the biggest absolute element:
$(function(){
$('#container').height(Math.max($('#div1').height(),$('#div2').height()));
});
you can see the fiddle here
Button position is recomputed each time the toggle is done, you can use the complete option of one of your toggle to handle it:
$div2.toggle('slide', {
direction: 'left',
complete:function(){
$('#container').height($('#'+currentDiv).height());
}
}, 'slow');
see the fiddle here
use min-height for #div2
#div2{
width: 500px;
min-height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}

Extend "body" when absolute positioned element is outside the browser window

Imagine an HTML page like the following one:
<body>
<div class="main">
<div class="free">aaa</div>
</div>
</body>
The free div is absolutely positioned, and its position is outside the visible area of the browser. Because of that, it will generate an overflow, and scrollbars will be shown. This is ok.
The main div, instead, should be as big as the full area inside the browser. It shouldn't be limited to the visible area.
html, body {
height: 100%
}
.main {
background-color: gray;
width: 100%;
height: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: 3000px;
top: 3000px;
}
As you can see here, http://jsfiddle.net/y79NS/12/, the gray div doesn't extend in the "overflow zone". It works if I add a static width/height to html and body elements, but I don't know in advance how much it should be big.
Is there a pure CSS solution? If not, what's the best way to do it with Javascript, keeping in mind that the user could resize the browser in any moment?
You are just missing a semi-colon in your CSS, also use negative margins if you want to hide .free:
html, body {
height: 100%;
}
body {
position: relative;
}
.main {
background-color: gray;
height: 100%;
width: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: -3000px;
top: -3000px;
}
http://jsfiddle.net/btipling/y79NS/17/

Categories

Resources