I'm trying to jump to a section of a web page but...
I want to jump to the center of it (rather than have the top of the page be the top of the section)
Is there any way to do this?
I was thinking if there was some kind of #section + 50px kind of thing?
Because you wanted pure HTML, based on your tag, all I can come up with is this.
Create an absolute element.
Place it in the middle of the section.
Point the anchor to said element.
html {
scroll-behavior: smooth;
}
section {
position: relative; /* to make absolute child elements stay within it */
min-height: 100vh;
}
section.yellow {
background-color: yellow;
}
section.brown {
background-color: brown;
}
section.purple {
background-color: purple;
}
.middle.element {
position: absolute;
height: 0px;
top: 50%;
width: 100%;
}
.dashed-line.middle.element {
border-top: 1px dashed;
}
<ul>
<li>Yellow</li>
<li>Brown</li>
<li>Purple</li>
</ul>
<section class="yellow">
<div class="dashed-line middle element"><a id="yellow"></a></div>
</section>
<section class="brown">
<div class="middle element"><a id="brown"></a></div>
</section>
<section class="purple">
<div class="middle element"><a id="purple"></a></div>
</section>
<section></section>
Related
I am trying to create a sticky header and above that sticky header, I have one div which has dynamic content.
I am not sure how much should I give to top:???? as top div height is not fixed.
is there any way to calculate sticky div position from the top or is there any way to count top:?? from the previous element
I am looking for pure CSS solution
.container {
height: 200px;
overflow: scroll;
}
.content {
background-color: gray;
}
.header {
position: sticky;
top: 10px;
background-color: red;
}
.footer {
top: 10px;
background-color: yellow;
height: 400px;
}
<div class="container">
<div class="content"> runtime example text </div>
<div class="header"> header text </div>
<div class="footer"> footer text </div>
</div>
I've been testing my site on multiple devices, and when testing on a screen with high resolution there is all this extra white space underneath the footer.
How do I make the height dynamic, fixing this issue?
My HTML is as follows:
<div class="contact">
<div class="content--container">
........
</div>
<div class="container">
<div class="columns is-multiline">
<div class="column is-12">
.......
</div>
</div>
</div>
</div>
<div class="footer">
......
</div>
A quick and easy fix would be to add a min-height to your .contact element.
Assuming it sits directly insider your body element, and if your footer height is 200px, you could do:
.contact {
min-height: calc(100% - 200px);
}
This does require that your body is either position:static; (the default) or has a min-height of 100%.
Add a min-height to your body like this:
body {
min-height: 100%;
}
Change your footer position to absolute like this:
.footer {
position: absolute;
}
Position and add width to your footer like this:
.footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
}
Try to add these for CSS (it's from http://mystrd.at/modern-clean-css-sticky-footer/):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML template for that is:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Next option is to use flexbox like these example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
In these example body has class="Site" and content also have a class called class="Site-content" and looks like these:
<body class="Site">
<header>Your header</header>
<main class="Site-content">
<div> Text </div>
</main>
</body>
CSS for these example looks like:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Full source for the Site component used in this example you can find here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
Another easy way to make a footer look like it has a dynamic height (if a tall footer height doesn't matter to you) is by changing the body's background-color to match the footer's. Then you can give one of your containers a 100% width and apply a different background-color.
That gives you the visual separation of the content and the footer without having to position or resize the footer.
Heres's the CSS:
body {
background-color: tomato;
height: 100%;
}
header {
color: white;
padding: 20px;
}
.container {
background-color: white;
height: 200px;
padding: 20px;
width: 100%;
}
footer {
background-color: tomato;
color: white;
padding: 20px;
}
and the HTML:
<header>
<h1>This is my header</h1>
</header>
<div class="container">
<p>This is my content</p>
</div>
<footer>
<p> this is my footer that looks like it has a variable height.</p>
</footer>
Link to a working example:
http://codepen.io/Brydave/pen/dNQJMb
I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:
If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.
What about the following:
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
I still don't know what the issue was, but I made a solution using the css calc() function.
HTML:
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS:
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
I have two divs that stack horizontally on each other.
Each div occupies 100% of the view-port.
.section{
width:100%;
height:100%;
}
In each div there is an anchor to the other div.
<div class="first section ">
<a name="first-section"> </a>
<p>Click here to go to the second section</p>
</div>
<div class="second section">
<p>Click here to go to the first section</p>
</div>
<a name="second-section"> </a>
My goal is to show the content of only one div each time. But when one is on the second section div and resize the page, the two divs are showned when the page is resized to its initial size.
How can I avoid scrolling up when the page is resize?
I have body{overflow:hidden;}. Thanks.
You can set the div to position:fixed, so it's always relative to the viewport. Then hide all the divs except the first one by default, and show the one when it's on :target.
jsFiddle example
html, body { height: 100%; }
body { margin: 0; }
.section {
width: 100%;
height: 100%;
position: fixed;
}
.section:target {
visibility: visible;
}
.first {
background: lightblue;
}
.second {
background: lightgreen;
visibility: hidden;
}
<div class="first section" id="first-section">
<p>Click here to go to the second section</p>
</div>
<div class="second section" id="second-section">
<p>Click here to go to the first section</p>
</div>
Or, use z-index with different values, and move the div on top when it's on :target.
jsFiddle example
html, body { height: 100%; }
body { margin: 0; }
.section {
width: 100%;
height: 100%;
position: fixed;
}
.section:target {
z-index: 3;
}
.first {
background: lightblue;
z-index: 2;
}
.second {
background: lightgreen;
z-index: 1;
}
<div class="first section" id="first-section">
<p>Click here to go to the second section</p>
</div>
<div class="second section" id="second-section">
<p>Click here to go to the first section</p>
</div>
Note, both approaches require each div to have a solid background defined.
I'm trying to figure out how to best implement a sidebar, like the one in the new google plus
I'm using MaterializeCSS
where the "main" content of the page it's width decreases when the sidebar is open and it becomes the fullpage width when the sidebar is closed.
I'm trying to do this with the ui-router.
This is my current setup:
<header>
<div ui-view="header"></div>
</header>
<main ui-view="container"></main>
<footer>
<div ui-view="footer"></div>
</footer>
and each element has it's corresponding controller.
I was thinking of creating a new controller for the sidebar.
But I can't seem to make this work like I want:
this is what I tried:
<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="content" ui-view="container"></div>
</main>
css:
main {
width: 100%
}
.navigation {
width: 20%;
float: left;
}
.content {
min-width: 80%;
float: left;
}
Work with float:right and float:left, then position the footer using position: absolute with the parameters like bottom:0 and left:0to position on the bottom and left of the page, setting a width that I want.
Then mark the divs with background-colors and text to see exactly whats happening when I'm coding.
All your content wrapped inside the <main>, because it's where it's gonna the left bar and the content.
I'm sorry if I couldn't explain better
main {
width: 100%;
position: relative;
height: 100%;
}
.navigation {
width: 20%;
float: left;
background: black;
color: white;
height: 100px;
}
.content {
width: 80%;
float: right;
background: red;
color: white;
height: 100px;
}
footer {
position: absolute;
background-color: green;
color: white;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
<header>
<div ui-view="header"></div>
</header>
<main ui-view="container">
<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span>
</div>
<div class="content" ui-view="container">aaaaaa</div>
</main>
</main>
<footer>
<div ui-view="footer"></div>
</footer>