Develop Reference

Calculate the height value of DIV as a function of SCSS and use it as the height of another DIV

The DIV height value must be calculated as a function of SCSS and used at a different DIV height.
I searched but couldn't find the SCSS function that calculates the height of another div using an internal variable.
I'm trying to create a chat window, and I hope that the input box for this chat is position: absolute and always at the bottom.
The problem is that the text you type increases the height of the chat entry box. This means that the exact height is not determined in the chat.
A problem was found that determines the height of the dark red chat content.
The chat history field could not be set to calc() because it is not a fixed height, resulting in an error similar to the one in the middle.
The last picture is what I want.
Can the SCSS function receive the height of the chat input box to determine the height of the chat content?
I would like to solve this problem with SCSS or CSS as much as possible, but if not, I can use pure JavaScript. (Not jQuery.)
<div class="parent1">
<div class="chat-history">
<p>abdcdaceasdfasdfddasfdefdafdadfsdfdasdfdsfasdfasdf</p>
</div>
<div class="chat-input"></div>
</div>
.parent1 {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.chat-history {
width: 100%
} // I'd like to calculate the height of this.
.chat-input {
display: flex;
position: absolute;
bottom: 0;
min-width: 70px;
max-height: 140px;
}

SCSS can't calculate the height, you'll need Javascript for that.
The only thing that can somehow use heights that are not set in advance is flexbox. But if your boxes are not next to each other it won't be useful.
You could create a javascript that creates a CSS variable based on the height of the window.
:root {
--my-variable-name: #999999;
}
document.documentElement.style
.setProperty('--my-variable-name', HEIGHT);

Please try this:
.parent1{display:flex;width:100%;height:50vh;position:relative;}

Why wont my div vertically align?

I've written some code where when I click on an image it fades out and fades in a new div which should be vertically aligned. I use the same code as my logo which is originally vertical-align: middle, so I don't see the issue.
The code I'm using currently is this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
Here is the JSFiddle of a section of my code: http://jsfiddle.net/L79kte39/

Vertical alignments in CSS can be tricky. Here's a good article I go back to when I haven't done it for a while:
http://phrogz.net/css/vertical-align/
Apparently (read: supposedly), CSS has been adopted enough for the following to work fairly universally:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source

Here's my version. It uses vertical-align...with a lot of twists. It does not use transform, or any exact pixel widths. It does use one extra container.
The key is this:
.cod-valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
which creates an empty inline-block that fakes vertical-align (meant for text-row character placement) into thinking the current line of text contains a 0-character, 100%-tall string, at the center of the div. Then, the next element aligns next to it by also setting vertical-align. (I applied the image the same way)
It's tricky, but probably easier to understand if you remember that vertical-align was first intended for things like aligning large characters in a line of text in the correct way. (ie, if the first letter of a book chapter is large, does the rest of the text go at its top, or its bottom?)
http://jsfiddle.net/7qtLLakq/

#cod-options would need a height to have it centered the way the logo is centered. Try height:200px

DIV height 100% for remaining space under another div

So I have a header bar for a page I made with a height of 150px. Under that area I want another DIV to fill the remaining space (width and height) all across the screen and to the bottom of the screen. I've tried setting height: 100% for the DIV, but that causes the screen to become scrollable and I only want it to fill the remainder of the page. NOTE: There is NO footer or anything under it.
Using jQuery/Javascript is acceptable, but CSS-only is prefered (if possible). If using jQuery, please explain the proper way to have it implemented into the page (I'm assuming $(function() {...}); under the <style> tag in the head.
I've tried searching for a result before, but nothing seems to work correctly.

tl;dr I basically made 3 options for you. click on the 'like this' in the below paragraph to see what they all look like without any text. Click on the A). B). and C). links in the paragraphs below that to see the difference between the three options. Check how each one scrolls differently, they are all different I promise. After you look at all three you can read how the one you want is implemented. (that is if you like any of them.) Hope you like it, no problem if you don't :)
I'll have a go at this, because it honestly depends on what you're going after there are multiple ways to look at it and it depends on your end goal. I will cover three possible scenarios: (which all look the same without text mind you, like this, but if you want to see what they look like with text click the letters. Make sure you scroll the page to see the difference between them.)
(Just as a side note I based A). and B). off how Twitter Bootstrap does it.)
A). You just want it to look like one div on top of the other (header div on top of main-content div) and display like that, but you still want the page to scroll if the 2nd div's text overflows. In this implementation when they scroll will move the header out of view, but if you don't want the header div to move out of view that leads me to
B). Same as the first header div on top of main-content div, but when they scroll the header div will still stay in place at the top instead of moving out of view.
and last of all,
C). You really do want the div to stretch to the bottom of the screen and never have the scroll bar for the whole page. This could be used in some cases, for instance, Spotify makes a nice music app with this kind of style so that you never scroll the whole page just panes in the page.
Ok so first here is the html code used to construct all three of them
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
And now to the fun part...
I will provide a Fiddle for the following examples, and with the css I will put the necessary code at the top and the unneccessary code at the bottom. (The html may have some unneccasary text so just ignore that. I just want you to see the page scrolls differently on the three.)
A).
no need to rephrase what it is so I'll just show you the code that is necessary.
First, here is A). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for A). (the background-color isn't completely necessary, but it is somewhat necessary to show the point.)
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
and now for...
B).
First, here is B). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for B).
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
As you can probably tell the only difference is the position: fixed on the .header, but look at the two examples to see the difference it makes.
and now last of all C).,
C).
First, here is C). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 1 where it has a scroll bar just for that area's overflowing content.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 2 where it hides the overflowing content. (This is honestly bad practice and I wouldn't do it. So if I may suggest. I would go with option 1 of C).)
Here is the necessary css for C).
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
I won't explain it, but here is an article on positioning that will.
here is the only necessary css for option 1 is adding overflow-y: auto to .main-content, but if you want to go with option 2 which I don't suggest you can go with overflow-y: hidden on .main-content
Well that's all for my post which is probably too long for most people sorry if I bored you, but I'm just trying to help. Hope you figure out the layout you want. This is only a few examples of the layouts possible with good old css. If you don't get the layout you want from this or any other post feel free to send me a message by commenting below, and I'll be happy to answer it sometime. Hope this helped. If it didn't that's fine too. :)

You can try css3 flexbox.
http://jsfiddle.net/wL9aM/1/
.container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 700px;
}
.header {
height: 200px;
background: red;
}
.main {
-webkit-flex: 1;
flex: 1;
background: blue;
}

try using script..
var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px
$(".filler_div").height(window_h - header_h);
You can also put that inside a function() so that you can add it also when you resize the browser, the filler space also adjusts...
function setfillerDivHeight(){
//the code above
}
$(document).ready(function(){
setFillerDivHeight(); //the initial setting of height
});
$(window).resize(function(){
setFillerDivHeight(); //reapply setting of height when window resizes
});

<div class="full-page-height-wrapper">
<header></header>
<main></main>
</div>
html,body {
height: 100%;
margin: 0;
}
header {
height: 150px;
}
.full-page-height-wrapper {
min-height: 100%;
position: relative;
}
CODE: http://fiddle.jshell.net/N7zJg/9/
preview: http://fiddle.jshell.net/N7zJg/9/show/

I don't think you cannot acheive that in pure CSS.
So, there is two different solutions:
1) You can put the 150px div in the 100% div.
2) You can do it with jQuery:
If your top div is <div id="A"> and the second one is <div id="B">, you'll have:
var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });
Feel free to adapt the code if you have some margins.

Found a solution myself finally. Doing it this way makes the design more responsive since (if i choose to add something to the bottom), it will automatically resize the div's height.
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-column;
}
#fullDiv {
height: 100%;
}

I found two solution.
The one is that I have must set the div in the absolute position.
the div float over the screen.
another one is use table-row display.

If you use just CSS, you cant achieve your task by giving 100% height to div. Because what basically CSS is doing is giving 100% height to your DIV plus giving 150 px to above header. Consider giving height of DIV less than 100% or some static value such as 600px or 700px.
Alternate is having a class of DIV with min-height 100% and inside it putting your header and body.

Moving label looks good in Firefox - not so good in other browsers How to change?

I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.
Please check it out here: http://jsfiddle.net/5nZWJ/68/
The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don't keep the bottom-border justified (hard to explain but you will see it if you try it out).
What do I have to change to make this thing in all browsers look like in Firefox?
Thank you in advance!

I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/
The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn't need to recalculate the position from the top.
CSS:
#wrapper {
background-color: lightblue;
height: 110px;
width: 500px;
position:relative; /* Allows absolute figures to be predictable */
}
#formWrapper {
background-color: yellow;
border-bottom: 4px solid red;
bottom: 29px; /* Changed from top and new measurement added */
left: 120px;
height: 57px;
position: absolute;
z-index: 1;
width: 108px;
}
JavaScript:
I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.

I think this might be related how different browsers count border pixels
http://ejohn.org/blog/sub-pixel-problems-in-css/
(not actually the same problem, but you get some idea)
Instead of using border, I recommend you add a div wrapper around the element, with the background color set to border color and padding set to the border width.

Increasing the Size of Object Frame to Remove Scroll Bars

I recently asked how to hide the vertical scroll bar using overflow:hidden. While the answer did work (the scroll bar is hidden), I am wondering why it's even appearing in the first place. I would think that including an object inside another page would automatically grow to the size that is needed unless otherwise constrained (which, I don't believe I'm doing). The CSS for my object is:
object {
width: 100%;
height: 100%;
border: none;
}
Any suggestions to allowing the entire object to be the full size it needs to be, instead of hiding it? Thank you.
P.S. For the record, the entire site is run off a local machine - it won't have any network access.
Edit: This SO Question is almost exactly what I'm looking to do, but with an object rather than an iFrmae. However, I can't seem to get this to resize the containing div to the correct size.

html, body, object {
margin: 0;
padding: 0;
border: 0;
position: fixed;
height: 100%;
width: 100%;
outline: none;
}
The <object> will be 100% size of the window with this CSS. <html> and <body> must be included as to set <html>s height to 100%.

Just reset all margins and padding to 0, so that no 'hidden' space is taken up