How to push CSS shape at the bottom out of the screen?How to apply CSS to iframe?How to align content of a div to the bottomHow do I give text or an image a transparent background using CSS?How to style a <select> dropdown with only CSS?How can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Creating a two-column-100% layout with BootstrapCSS oval shape cut out from divFull size <main> with footer pushed to the bottom
How did Biff return to 2015 from 1955 without a lightning strike?
What is my clock telling me to do?
"Will flex for food". What does this phrase mean?
Why are sugars in whole fruits not digested the same way sugars in juice are?
IBM mainframe classic executable file formats
Does the problem of P vs NP come under the category of Operational Research?
How do people drown while wearing a life jacket?
How can a class have multiple methods without breaking the single responsibility principle
What is the most 'environmentally friendly' way to learn to fly?
Is it moral to remove/hide certain parts of a photo, as a photographer?
Does the Oath of Redemption paladin's Emissary of Peace feature reflect damage taken as a result of the Aura of the Guardian feature?
How to gracefully excuse yourself from a meeting due to emergencies such as a restroom break?
Being told my "network" isn't PCI Complaint. I don't even have a server! Do I have to comply?
Adding a (stair/baby) gate without facing walls
Disease transmitted by postage stamps
Is this mechanically safe?
How do I respond appropriately to an overseas company that obtained a visa for me without hiring me?
Protect a 6 inch air hose from physical damage
If I buy and download a game through second Nintendo account do I own it on my main account too?
Applying for mortgage when living together but only one will be on the mortgage
Can black block with a hanging piece in a back rank mate situation?
How to escape forward slashes?
How to compare files with diffrent extensions and delete extra files?
Why are prop blades not shaped like household fan blades?
How to push CSS shape at the bottom out of the screen?
How to apply CSS to iframe?How to align content of a div to the bottomHow do I give text or an image a transparent background using CSS?How to style a <select> dropdown with only CSS?How can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Creating a two-column-100% layout with BootstrapCSS oval shape cut out from divFull size <main> with footer pushed to the bottom
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to replicate this mockup.
And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening the webpage without going out of the screen. How to push it out of the screen like in the picture?
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
left: 60%;
top: -35rem;
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: relative;
z-index: -1;
right: 45%;
bottom: -35rem;
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
....
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
css html5 css3 css-shapes
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
add a comment |
I'm trying to replicate this mockup.
And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening the webpage without going out of the screen. How to push it out of the screen like in the picture?
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
left: 60%;
top: -35rem;
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: relative;
z-index: -1;
right: 45%;
bottom: -35rem;
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
....
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
css html5 css3 css-shapes
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
I did a comment below
– Abel Valdez
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36
add a comment |
I'm trying to replicate this mockup.
And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening the webpage without going out of the screen. How to push it out of the screen like in the picture?
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
left: 60%;
top: -35rem;
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: relative;
z-index: -1;
right: 45%;
bottom: -35rem;
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
....
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
css html5 css3 css-shapes
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
I'm trying to replicate this mockup.
And I successfully pushed that top circular shap out of the screen like in the picture. But the bottom one is just lengthening the webpage without going out of the screen. How to push it out of the screen like in the picture?
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
left: 60%;
top: -35rem;
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: relative;
z-index: -1;
right: 45%;
bottom: -35rem;
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
....
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
css html5 css3 css-shapes
css html5 css3 css-shapes
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
asked Mar 26 at 23:35
BluebugBluebug
426 bronze badges
426 bronze badges
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
I did a comment below
– Abel Valdez
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36
add a comment |
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
I did a comment below
– Abel Valdez
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
I did a comment below
– Abel Valdez
Mar 27 at 21:36
I did a comment below
– Abel Valdez
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36
add a comment |
3 Answers
3
active
oldest
votes
The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:
.footer
position:relative;
overflow:hidden;
you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
add a comment |
You add element body and css as below:
body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
it would be good to explain the purpose/effect of addingheight:100vhon the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.
– ryantdecker
Mar 27 at 3:50
add a comment |
Try by using the follow class for bottm left circle
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: absolute;
z-index: -1;
left: -15%;
bottom: -15%;
Circle example
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55367697%2fhow-to-push-css-shape-at-the-bottom-out-of-the-screen%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:
.footer
position:relative;
overflow:hidden;
you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
add a comment |
The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:
.footer
position:relative;
overflow:hidden;
you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
add a comment |
The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:
.footer
position:relative;
overflow:hidden;
you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
The answers so far aren't wrong, but IMO they are incomplete. If you want to have your circle be 'cut off' and not become visible when you scroll down, it will need to be contained in another element that will restrict its visibility. position:absolute; is part of the solution, but it will position your element in relation to the nearest containing element that has a position defined - so your footer div will likely need position:relative; added. Then, you'll need to make sure the part of the circle that's supposed to be cut of isn't visible even though it overflows the bottom of the footer, so adding overflow:hidden will finish the job. This should get you headed in the right direction:
.footer
position:relative;
overflow:hidden;
you may or may not actually want that to be applied to the footer div, but the principle is the same...overflowing elements will be visible and cause scrolling unless you tell them not to, so having it overflow the page is really an illusion created by having another element 'crop' or hide the the part that would be overflowing. As some other answers have suggested, you could do that by styling the body or html elements, but the behavior is usually more predictable if you use an element nearer to the one you want to be cut off. For example setting a fixed height or 'overflow:hidden;' on the body would prevent your page from scrolling if you add content that is taller than the screen.
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
edited Mar 27 at 3:40
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
answered Mar 27 at 3:34
ryantdeckerryantdecker
1,2847 silver badges12 bronze badges
1,2847 silver badges12 bronze badges
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
add a comment |
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
Hi! There is a small problem. The footer already had a relative position and adding overflow:hidden clipped the bottom part of the circle nicely, but clipped the top part as well.
– Bluebug
Mar 27 at 21:24
1
1
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
You may need to adjust the size and position (top/left values) of the circle, as well as the size of the footer to achieve your exact effect - hopefully the concept I’ve described gives you the info you need to experiment and customize as needed,
– ryantdecker
Mar 29 at 4:58
add a comment |
You add element body and css as below:
body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
it would be good to explain the purpose/effect of addingheight:100vhon the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.
– ryantdecker
Mar 27 at 3:50
add a comment |
You add element body and css as below:
body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
it would be good to explain the purpose/effect of addingheight:100vhon the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.
– ryantdecker
Mar 27 at 3:50
add a comment |
You add element body and css as below:
body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
You add element body and css as below:
body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>body
position: relative;
height: 100vh;
overflow: hidden;
#circleTop
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, red, yellow);
border-radius: 50%;
position: absolute;
z-index: -1;
right: -25rem;
top: -25rem;
#circleBottom
position: absolute;
width: 55rem;
height: 55rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
z-index: -1;
left: -25rem;
bottom: -25rem;
<body>
<div class="header">
<div id="circleTop"></div>
<div class="headerBox">
<h1>Headline</h1>
<h2>Subheading</h2>
</div>
</div>
<div class="footer">
<div id="circleBottom"></div>
<div class="section">
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="otherLinks">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</body>answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
answered Mar 27 at 3:16
Ty PhanTy Phan
191 bronze badge
191 bronze badge
it would be good to explain the purpose/effect of addingheight:100vhon the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.
– ryantdecker
Mar 27 at 3:50
add a comment |
it would be good to explain the purpose/effect of addingheight:100vhon the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.
– ryantdecker
Mar 27 at 3:50
it would be good to explain the purpose/effect of adding
height:100vh on the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.– ryantdecker
Mar 27 at 3:50
it would be good to explain the purpose/effect of adding
height:100vh on the body. I think that makes some big assumptions about the itent of the mock up and would lead to some display problems when the page is viewed on different sized screens...for instance on a tablet vs a laptop. You're on the right track, but without clarifying what your snippet is doing, it's quite possible it could create a bigger challenge for the OP than it solves.– ryantdecker
Mar 27 at 3:50
add a comment |
Try by using the follow class for bottm left circle
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: absolute;
z-index: -1;
left: -15%;
bottom: -15%;
Circle example
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
add a comment |
Try by using the follow class for bottm left circle
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: absolute;
z-index: -1;
left: -15%;
bottom: -15%;
Circle example
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
add a comment |
Try by using the follow class for bottm left circle
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: absolute;
z-index: -1;
left: -15%;
bottom: -15%;
Circle example
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
Try by using the follow class for bottm left circle
#circleBottom
width: 50rem;
height: 50rem;
background-image: linear-gradient(120deg, green, blue);
border-radius: 50%;
position: absolute;
z-index: -1;
left: -15%;
bottom: -15%;
Circle example
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
answered Mar 26 at 23:53
Abel ValdezAbel Valdez
1,2711 gold badge6 silver badges19 bronze badges
1,2711 gold badge6 silver badges19 bronze badges
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
add a comment |
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
Yes I just tried it. Unfortuantely didn't solve it. Adding overflow:hidden to the footer solves the problem partially. It does cut the bootom but also the top.
– Bluebug
Mar 27 at 21:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55367697%2fhow-to-push-css-shape-at-the-bottom-out-of-the-screen%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try by using position: absolute?
– Abel Valdez
Mar 26 at 23:44
I think you may want to re-frame the issue as: how can I prevent my main window from expanding to fill all content? The answer is: restrict the size of your main window.
– afarley
Mar 26 at 23:46
@AbelValdez I did.
– Bluebug
Mar 27 at 21:35
I did a comment below
– Abel Valdez
Mar 27 at 21:36
@afarley hmm I don't want to restrict the middle container (it can grow as long as it wants), but the header and footer can stay fixed.
– Bluebug
Mar 27 at 21:36