Develop Reference

HTML Fullscreen API , how to make it responsive (height vise) for dynamically generated divs

I am creating multiple dynamic divs of fixed height inside a main div. I can't change the fixed height to % height because it has to have a fixed height even if its empty because user drags elements onto these divs afterwards. Now i am using the Full Screen API to enlarge the main div to full screen. and i want the inside divs to grow their height as the screen enlarges.
On Small Screen it looks like this
On Full Screen it looks like this
on full screen the inside divs adjusted their widths accordingly because they have taken widths % vise but the height of divs doesn't increase because its fixed pixels. The red area in the second image shows the empty space when in full screen mode. how could this area be taken by the divs
The actual code of this is too much complex and lengthy so i am writing here a sample code to understand the problem
<div id="main">
<div Class="Row">
<div Class="Col-md-6">
<div id="A" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="B" style="height:100px;width:50%">
</div>
</div>
</div>
<div Class="Row">
<div Class="Col-md-6">
<div id="C" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="D" style="height:100px;width:50%">
</div>
</div>
</div>
Like i said that divs A,B,C and D are created dynamically. Now i apply a full screen function on main div
var element = document.getElementById("main");
element.webkitRequestFullscreen();
The main div gets to Full screen but the divs A,B,C and D do not adjust their height accordingly.

write a media query like this->
#media screen and(min-width:fullscreenswidth) {
.yourdiv {
height:100vh;
}
}
The fullScreenWidth is the size of the screen in pixels

In React, animate a centered element upon expand

I'm using React, and I centered an element horizontally and vertically using display: table and display: table-cell, with appropriate centering css.
Inside of it I have some content, when I add content to that element with javascript, the whole element recenters properly, but elements jump from their initial place to their next place.
I'd like to animate it in place, is that possible?
Going from this:
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
to this:
<div table>
<div table-cell>
<div>First Content</div>
<div>Second Content</div>
</div>
</div>
(didn't include css to make it easy to read)

I'd do this by adding the new elements with a special class like:
<div table>
<div table-cell>
<div>First Content</div>
<div class="slide-in">Second Content</div>
</div>
</div>
Make the special class have max-height: 0. After it has been inserted into the DOM replace the maximum height with some large enough pixel value to fit the contents on screen. Make sure you have a transition on max-height.
.slide-in {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}

Disable horizontal scroll where element is larger than viewport

I've trying to create something a bit like the navigation on google play, with a fixed number og tabs (the swyping in app-browsing).
I've created a div that contains some content divs.
<div id="container">
<div class="section"> ... </div>
<div class="section"> ... </div>
<div class="section"> ... </div>
</div>
To create the sliding between sections I set the container to a width of 300 %
I then set the left property of the container according to the button pressed.
My question is: How to disable horizontal scrolling of viewport?

You have two solutions:
Wrap #container inside another <div> which has 100% width, disabled wrap and overflow: hidden, then scroll #container inside it, or
Put overflow: hidden on the viewport (or try with overflow-x:hidden);

Set position of div relative to position of another percentage-width div

I two divs set within a parent div - a sidebar on the left & a content area to the right of that. I need to set the position of my content area (which has a fixed width) to always be 15px to the right of the sidebar (even as the browser window / sidebar stretches).
Setting the sidebar with position: absolute & a % width worked perfectly for the sidebar itself, but as the sidebar position is then absolute, the content doesn't recognise where the sidebar is & can't be positioned relative to it with CSS.
Here is an image of what I am trying to achieve:

Why are you using position absolute for the side bar?
I would just do it like this
<div class="container">
<div class="sidebar">
<p>This is your sidebar</p>
</div>
<div class="content">
<p>This is your content</p>
</div>
</div>
.container {width:100%; height: 1000px; background:blue;} /*didn't supply a width*/
.sidebar {width:25%; float:left; min-height:200px; background:lightblue; margin-right:15px;} /*you said sidebar has a % width*/
.content {width:250px; height:200px; background:red; float:left;} /*you said content had fixed width*/
Link to JS Fiddle to have a look
Unless I'm not understanding your question?

How do I determine the height of a div that has yet to be displayed on the page

I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.

The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.

You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.