Filling the page

Design help General
1

Hello,

I was am trying to have a div fill the whole screen. Now it works horizontally but not vertically, and when i put a height 100% in, it doesn’t work. There is nothing else on the website but a div or section with padding on the inside and a container inside that section with margins set. I have tried removing the margins and padding and that didn’t help. So how would i achieve getting a section to fill the height of the screen. Here is an example of what i want to have happen

http://blackpearlfarmssc.com/

thank you for your time.

2

This is a bit tricky but you could try changing the position to absolute, then height 100% is based on the container height which is the body and already inherently fills the height of the view-port.

However, if you have a menu section that is 80px in height above that, unless you give the section a “top” value, it will align below the 80px menu and have an 80px scroll at the bottom of the view-port (i.e. its 100% of view-port but pushed down 80px). If you give it a “top” value of 0px it will now cover up the menu but be 100% and the scroll bar should disappear.

My suggestion, if you want the top 80px menu to always be fixed like in your example url, rather than setting the lower section “top” value to 0, simply change the menu section to fixed positioning and give it a z-index 1 or higher. It will now float above your 100% section below it.

Keep in mind, any backgrounds and content will also be hidden under the top 80px menu which may be ok but if necessary you may have to offset the background position top by 80px and I think webflow only lets you use % for background positioning at the moment. As for the content you can always add 80+ px of padding from the top.

I’ll leave this up for a few days https://webflow.com/design/sandbox65?preview=df2fec88a8a3d2a4e1f8d120b93e4eff

3

@pingram3541 Your trick is brilliant. But I believe he means exactly what is on that website he provided. Section with 100%/100% cover that can be scrolled down to another section (also 100%/100%. So far I don’t know how to do it. Soon… :dancer:

I’ve checked a little bit… It goes something like this:

html:

<section class="home">
 <div class="container">
  ...
 </div>
</section>

css:

 .home {
	width: 100%;
	height: 100%;
	background: url('../img/backgrounds/home-bg-c.jpg') no-repeat center center fixed;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/backgrounds/home-bg-c.jpg',sizingMethod='scale');
	background-size: cover;
}
section {
	text-align: center;
	font-size: 0;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}
section .container {
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	font-size: 16px;
	margin: 20px 0;
	white-space: normal;
}
4

Cool website, well done!

5

Here you have it :wink:

6

Thank you for your help, it works, but is it then possible to place another section (div) right below that?

7

Sure, just add another <div> element. The class “full-width” is resized with jQuery

$('.full-page').height(vph);
8

How did you get it to work? Was it all within Webflow or after the code was exported? Thanks!

9

Hi @bartekkustra. I am also trying to get a full window site. I tried your method at [Code Tutorial] Full window site - Webflow Tips - Forum | Webflow, but the sections don’t have a 100% height, although they do have a 100% width.

So basically I want each section to be 100% width and height, like at http://blackpearlfarmssc.com/.

Can anyone tell me what is going wrong?

Troubleshooting link:
https://webflow.com/design/bertie?preview=9623231cbc78ed1d77158dd1f29d477c

Subdomain:
http://bertie.webflow.com/

Exported site:
http://bertieellisonwright.com/bertie.webflow/

And this is everything in the ‘custom code’ header section:

<style type="text/css">
div.full-page {
    width:100%;
}

div#page-1 {background-color:#f00;}
div#page-2 {background-color:#0f0;}
div#page-3 {background-color:#00f;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>vpw = $(window).width();
vph = $(window).height();

$('.full-page').height(vph);</script>

Thanks!
Bertie

10

Well… your fullpage id’s have <div class="full-page" id="page-nav-page-1"> which stands for the id="page-nav-page-1". And you try to style id="page-1" instead of id="page-nav-page-1":

    <style>
     div.full-page {
        width:100%;
     }
    
     div#page-1 {background-color:#f00;}
     div#page-2 {background-color:#0f0;}
     div#page-3 {background-color:#00f;}
    </style>

That’s what’s first. Second, try to put something inside that divs. Third: Edit fiddle - JSFiddle - Code Playground

1 Like
11

Thanks so much; I have got it to work now. I also needed to put the jQuery into something like this:

$(document).ready(function() {
    // jQuery code here
});

Thanks again,
Bertie

12

How did you manage to do that?

13

Do you mean about the jQuery? In the ‘custom code’ box, I put this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').height(vph);
});
</script>

Is this what you mean?
Bertie

14

Oh it’s ok :wink: I tought you had some other stuff to fix it to work :slight_smile: Glad you make it :wink:

1 Like
15

Hi @bartekkustra & @bertie. Could you please answer Randy… I’m stuck as well :blush: can you explain to me as if I were “the last of the dummies” :smiley:

All I want is 4 full page sections (the first one with a photo background 100%/100%)…, and I’m not getting there. I really need to have it done asap…

Thanks in advance :wink:

16

Hello @hhelderalves! Everything was already said in this topic. Read through the posts, check links from those posts and try to do the same in pure html first. Then try adding it to webflow :wink: Here you have all the code that is needed: Edit fiddle - JSFiddle - Code Playground

17

In addition to @bartekkustra’s post, here is the custom code you need to add (Site Settings —> ‘custom code’):

<style type="text/css">
div.full-page {
    width:100%;
}
div#page-nav-Page-1 {background-color:#f00;}
div#page-nav-Page-2 {background-color:#0f0;}
div#page-nav-Page-3 {background-color:#00f;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').height(vph);
});
</script>

Then, give each section which makes up a page the class of Full Page then in the settings for that element in the panel on the right, give it a unique id of Page-1. Do this for each ‘page’, but of course changing the unique id to Page-2 and Page-3.*

Look at my site’s troubleshooting link to see exactly how this works but each section will not take up the full page on the preview, only at the published subdomain, http://bertie.webflow.com/. Therefore, the website only takes up a full page when the site has been published or exported.

Hope this helps,
Bertie

*Or, if you want to do this after the code has been exported, see Bartosz’s fiddle and use the html to make the sections take up the full page:

<div class="full-page" id="page-1">Page one goes here</div>
<div class="full-page" id="page-2">Page two goes here</div>
<div class="full-page" id="page-3">Page three goes here</div>
1 Like
18

Hi @bertie & @bartekkustra,

Handcoded works fine, I did know that. The step by step tips of Bertie were pretty self-explanatory, thanks a lot, but unfortunally didn’t work… I might be missing something or having any other problem…

I think I’ll have to change some of my ideas about the layout…

Thanks anyway.

19

Hi. This is unusual, could you send me the troubleshooting link and your subdomain so I could have a look?

Also, copy+paste your custom <head> code here.

Thanks,
Bertie.

1 Like
20

Hi @bertie

Hold on a sec. I think I got now… don’t know what went wrong the first time,done it from scratch and it seems to be working… at least I’ve got a first full page :smile:

I’ll get back to you (if you don´t mind) when problems come around again, I’m shure they will… :blush:

Thanks again.