How to set 100 % height without having a vertical scrollbar? - javascript

Context
I have a navbar with a fixed height. I want the space underneath to fill the rest of the screen vertically. I also need to have a fixed height because I have a container inside the page that has a list that is scrollable but without scrolling the whole page overflow: hidden
The Problem
When I set a height on all parent elements of 100% I get a vertical scrollbar. I found some answers on SO about "margin collapse" but nothing that could solve my problem.
100vh also won't work without having a scrollbar.
Here is the css for setup the height (#__next is just a div where next.js renders the page):
html,
body,
#__next {
height: 100%;
width: 100%;
}
The navbar is just a fixed pixel height, and the space below has height: 100%
Here is a screenshot that shows the vertical scrollbar:
I can't find any problems on the chrome inspector.
This is how it should look (design file):
Do you know how to solve this? I need to have both containers from screen "SippetPanel" and "SnippetContent" to take the remaining height without adding a scrollbar. It should also work to have a inner scrollbar with overflow hidden (later on when there are many items in the list like from design file)

Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:
#__next{
height: calc(100% - navbarpx);
...
}
calc()
For the padding issue you can look into border-box.

I usually just try different vh values, that means 90vh, 95.5vh etc. so it all sits perfectly. You can try to meddle with body position: absolute etc., but that would push everything into the navbar, so then you would need to fix it with additional margin-top.
So the best solution I see is to try different vh values for the height and find the sweet spot. You will need to do the same for different phone types as well with media queries, but it shoudn't really be hard.

One of the ways is to use flex-box, it allows you to explicitly say(take all available height.
.body {
display: flex;
flex-direction: column;
}
.navbar {
flex: 30px 0 0;
/* 30px height and do not grow or shint */
background: red;
}
.content {
flex-grow: 1;
/* take all available space */
background: blue;
}
.body, html, body {
width: 100%;
height: 100%;
}
<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>

Related

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

css flexbox only works on resize when using ajax

I am using a CSS Flexbox to stack three divs on top each other.
The middle div must grow or shrink depending on the size available.
The top and bottom div will take up the size they have.
When testing this in a fiddle it will work.
However, I am loading the data in the page using ajax and fullPage.js slider.
the result is that the middle div does not fill up the remaining space.
When I resize the window, it will trigger a change in size and everything is well.
So I have been trying to create a work around, thusfar without any success.
What I have done so far:
try to trigger a window resize $(window).trigger('resize');
try to change the CSS height for the flexible box
try to reload data after 500 ms.
setting the flexbox height to a certain height and then setting it to auto again.
and I forgot all the other things I've done so far trying to do some CSS tricks.
Here the CSS / HTML
CSS:
#wrapper {
display: flex;
flex-direction: column;
position: relative;
}
.pageInfo {
flex: 0 0 auto;
}
.pageData {
flex: 1 1 auto;
margin-top: 10px;
}
.sliderBtnBar {
flex: 0 0 auto;
height: 40px;
position: relative;
}
HTML:
<div id="wrapper">
<div class="pageInfo">some text</div>
<div class="pageData">
<div>data</div>
</div>
<div class="sliderBtnBar">btns</div>
</div>
In the wrapper I will load the pageInfo, the pageData and the sliderBtnBar divs on a later time. At that point the Flexbox doesn't work. Loading this when the page loads it will work.
So like I said, I can't find a work around.
Have you seen this before or know how to solve this?
Any idea would be helpfull.
Thanks in advance!

How to apply a responsive CSS height to an element using min/max-height and height?

I'm trying to expand a Dygraph to the maximum available dimensions of it's parent container.
Technically the graph is resizeable, either by using a re-rendering method or by specifying an absolute container like in this example.
Problem is, the plugin expects hardcoded values, otherwise it will calculate something arbitrary - see this link for explanation, which says:
// For historical reasons, the 'width' and 'height' options trump all CSS
// rules _except_ for an explicit 'width' or 'height' on the div.
// As an added convenience, if the div has zero height (like <div></div> does
// without any styles), then we use a default height/width.
I have been playing around with the following setup:
<div class="graph_wrap">
<div class="graph_container">
<!-- graph will be here -->
</div>
</div>
I managed to stretch the graph WIDTH to 100% by setting this CSS:
html .ui-graph {
width: 100%;
min-width: 1px;
}
but without specifying a height, the plugin overrides my CSS and doing this:
html .ui-graph {
width: 100%;
min-width: 1px;
/* height... */
height: auto;
max-height: 100%;
min-height: 100%;
}
does not work. Only if I add something like height: 20em, the plugin does not overwrite my set CSS.
Question:
Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else.
does
There is no way to force the browser to maximum height. You can write css like
.max_width{
width: 100%;
}
this will make the container 100%.
But the height will be determined by the height of the elements inside.
This can be solved using javascript though.
You can do it multiple ways:
The way It looks like you are doing is having the graph stretch with the browser window.
height: 10vw; /* viewport width */
or
height: 10vh; /* viewport height*/
these are different, so experiment what you want. This will definitely resize it.
In the resize-to-browser example you provided, the element is scaling to the parent container just as you wanted. You can then apply your sizing rules to the container (#div_g), not the graph itself.
In that example, adding this will make the graph scale with the browser height until it is 300px tall:
#div_g {
max-height: 300px;
}
All of the graph generated elements are calculated with JavaScript. That's why CSS doesn't work for them. So style the container, and let the graph itself resize it to fill that container.
You should be able to use position: relative; instead of absolute, if you want your graph to be positioned with other elements.
"Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else. does"
Traditionally the height of the html document is the same height as what it contains, like any other block element. You can stretch this to fit the browser height using the following:
html, body {
height: 100%;
margin: 0;
}

Dynamically set <div> height & margins based on the same <div> width

I am creating a responsive site and I want to adjust a height based on it's width. This is going to be a parallax & responsive site. For the site's responsiveness, I decided to have a container element be adaptive and adjust size based on media queries. Then, this child will have a width of 90% or so.
I wanted to write either JS or with the help of JQuery to set the height & margins of this based on the new width at each break point. I think this would be easier then trying to set a new "px" height for each of these break points. And since I want to have some parallax effects, I need to set the s margins as % instead of pixels to get the same effect on multiple devices.
Please let me know if any of this doesn't make sense.
Thank you very much.
If you want the width and height to be the same, you could use:
width: 100vw;height: 100vw;
Here is another solution, for a resizable div that maintains a 16x9 aspect ratio. 9/16*100=56.25%
http://jsfiddle.net/ks2jH/512/
CSS:
.aspectwrapper {
display: block;
width: 90%; /* whatever width you like */
background-image: url('http://placehold.it/160x90');
background-size: cover;
background-repeat: no-repeat;
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
HTML:
<div class="aspectwrapper">
</div>

how do I make a resizable scrolling text box in a fluid layout?

I've tried using Dreamweaver's standard fluid layout, and modified it with 10% column widths and 24 columns on the desktop design. I've tried creating a div within a div (bear with me, I'm a noob at Dreamweaver), and set the constraints of the text box to be within the outside div, and haven't been able to come up with a solution on that front.
I tried to set the parameters of the text box itself but that doesn't work either because of the conflict of % v. px. In the fluid layout, I'm using % for the resizing to work.
In essence, the issue lies within being able to set the vertical constraints on the text box to be in proportion for when the screen size changes; horizontal is fine because I can just set the width constraint in Dreamweaver's design module.
I'm thinking that I'll have to set it up through a javascript of some sort; although I know nothing about java except to pluck code from someone who's built it and plug it into the site.
Sorry for the rambling nature of this post, and I hope it makes sense.
I was helping you in your other question regarding jQuery and I decided to snoop around and found this question. I understand you want a fluid height for a text box in a column. That can be achieved like this:
CSS:
/*
In order to use width/height: 100% on the body and html
You need to remove the margins and padding on them, otherwise
you'll see a vertical and horizontal scroll bar, which is awful.
This way, it removed margins and paddings on everything, ultimately
leading to better styling overall.
*/
*
{
margin: 0;
padding: 0;
}
body, html
{
width: 100%;
height: 100%;
}
/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
width: 100%;
height: 100%;
}
/* The column that the textbox will be inside */
#someColumn
{
width: 50%;
height: 50%;
margin: 5px;
padding: 5px;
}
#someColumn textarea
{
width: 25%;
height: 50%;
/* The textbox will now be 50% the height of #someColumn */
}
HTML:
<body>
<div id="wrapper">
<div id="someColumn">
<textarea></textarea>
</div>
</div>
</body>
Here's a jsFiddle to see what it looks like

Categories

Resources