Skip to main content
B
BigDingus
Inspiring
September 7, 2018
Answered

Not Filling The Total Sceen.

  • September 7, 2018
  • 1 reply
  • 1244 views

Good day folks.

First can I say I'm low level with Dreamweaver.

I've put aweb page together that looks not too bad.

However, I have a slight problem I'd like a solution too. I can get my page to fill the screen.

I've searched the internet for solutions which I've tried but without any success.

I get a small amount, about 2px, of white background around my page.

If I use this CSS it works, but causes issues:

{
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw;
}

If I try 100vmin in either body or container it has no effect, other than Expected RBRACE.

Can anyone help?

This topic has been closed for replies.
Correct answer Nancy OShea

Jon I don't think it's the browser as both images are from the same one.

However, I think your margin:0; is pointing in the correct direction as it worked in Dreamweaver 'Live'.


By default, all browsers add margins and padding to every HTML element.   The sledgehammer way to remove them is to use an asterisk to reset the defaults  Add this to the top of your CSS code.

/**CSS reset**/

* {margin:0; padding:0}

1 reply

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
September 7, 2018

BigDingus  wrote

If I use this CSS it works, but causes issues:


That translates to "it doesn't work"

Could you post a link to your work in progress? That way we can see with our browsers exactly what you're trying to get working and any other code on the page that might be keeping you from the expected result.

What you have, in your css above, really doesn't have much to do with making anything full screen, other than the 100vw. That setting alone would make an element 100% of the viewport width but wouldn't count anything outside of, and adjacent to, that element. Any "extra" would make scrollbars appear as the page would be 100% viewport width + widths of elements adjacent to the 100vw element.

Seeing everything you have will lead to a correct answer much, much more quickly.

B
BigDingusAuthor
Inspiring
September 7, 2018

Thanks Jon.

I don't have a link yet as I haven't put it online yet. Hopefully the images will explain it better.

I would like but have The first is from a web page I came accross and liked.

The reason I say 'Works', it has the correct affect but scrambles lots of my other settings. ie my return to top button that is position:fixed goes halfway up the page.

The 100vw doesn't fill my screen no matter where I try it. Other than the Expected RBRACE that I mentioned.

My CSS:

.scrolltop {

    position: fixed;

    width: 150px;

    bottom: 120px;

    right: 130px;

    border: none;

    outline: none;

    background-color: transparent;

    color: white;

    cursor: pointer;

    padding: 15px;

    border-radius: 30px;

    font-size: 18px;

If I can post anything else please ask.

B
BigDingusAuthor
Inspiring
September 7, 2018

Sorry posted the wrong CSS

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices