Streaming live at 10am (PST)

Fill rest of height page


#1

Hello everyone,

I'm not finding a solution to this problem.
I actually want to hace a navbar with the height set to 50px for example, and i want to put a row just below. I want the right column to be fixed and filling the 100% - 65px of the height.

How can i do this?? Is there a way to so this please?

Thanks!


#2

Hello @ollo,

In Webflow almost everything is possible. But would be really awesome if you could provide some example or at least wireframe. Because it is hard to be sure what the structure you mean.

Regards,
Anna


#3

Hello sabanna. I know I love webflow!

Example:

I put a div block with 100% width and 200 px height.
Underneath this first div block, I put another one with 100% width. But this time, I want this second div block to have the height of the remaining page height: 100% - 200 px.
How can i dot this?

Is this explanation better?

Thank you!


#4

Thanks for detail explanation smile

In such situation I would use VH in div's height. Lets say 1st would be about 20vh and 2nd 80vh.

Hope it helps,
Anna


#5

I think that doesnt work, because what I want is the first block with a fixed height 200 px.
And the one below with a variable one: From te bottom of div1 to the bottom of the page.

If I put 20vh the div1 doesnt have a fixed height, right?

Thank for your answer!


#6

Please people, this isn't possible then?


#7

Well, there is another way to do this. Set div (section) to 100%, position: relative. Then inside it set another div with position: absolute and height 200px (or whatever you need). Div top padding to 1st(bigger) div as much as 2nd div height.


#8

Thank you,

If i understand well this just gives me a div1 above a part of the div2 right? So I cant really put anything in the div2 that starts just under the div1 and finishes at the bottom of the page. Instead I would have a div2 that starts on the top of the page (under div1) and finishes at the bottom.


#9

It is what I mean:

If this option is not acceptable, then only way is using JavaScript

Regards,
Anna


#10

How do you use the VH ? I only see PX % Auto. Don't see a way to even type in VH. Sorry Pure noob to the system.


#11

Just type VH or VW right next to numbers, no space. System will accept it and will show size in this measurements.


#12

Hello! If I want to to put something in the "content area for div1", like a div, or a container, I cant put it there right?It wont stay between the bottom of the div2 and the bottom of the page right?

The content area for div1 is there, but i cant really use that red square.

For example if a put a div3 under the div2, adjusting top margin to the fixed height of div2, i cant tell that div3 to have a height to the bottom of the page, right?

Thanks!


#13

I don't see the reason why you can't.

Let's go back to examples/explanations what for you need such structure. Because for now we start to think in opposite directions smiley


#14

This is what i mean.

And when the window browser have less height, this is what should happen.

The div 3 readapts the height to the new windows browser height.

This is a pretty good example. The map in airbnb
https://www.airbnb.fr/s/Torino--Turin--Italie?guests=2&checkin=17%2F10%2F2015&checkout=19%2F10%2F2015&search_by_map=true&sw_lng=7.674597009540548&sw_lat=45.08605670956564&ne_lng=7.69476722133254&ne_lat=45.09341456953726&zoom=15&ss_id=20vvi3vb&ss_preload=false&source=bb

How can i put a div or container that responds like the map?

Is this more clear?
Thanks!


#15

Try these:

Step 1:
add your main div/container and set the height to 100vh

Step 2:
add your nav bar inside your main div/container and set the height to 200px and the position to absolute top

Step 3:
add your div/container that will fit the rest of the height page and set the top margin to 200px and the height to 100vh

I think that should work. Let me know.


#16

Hey there,

it doesnt work. Correct me if im wrong, but 100vh is the same that 100%? Because if it s the same the div/container3 is filling 100% of the page height, and not the container height it is contained in.. why?

Thanks!


#17

Hey @ollo

100vh stands for 100% of the view height (device or browser height). Vs using 100% height is 100% of the parent container height. So if your parent container height doesn't have a set height, then there's no way for it to know what to be 100% of. So using VH it goes off of the browser/device height. smile

Please let me know if you have any questions. smile the same concept goes for VW (view width). smile

Thanks,

Waldo


#18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.