Related
I have a page on my site that has a lot of text on the right hand side, and I have an image on the left hand side. I want that image to stay with the user as they scroll through the text.
Set the image's parent element to position:relative, then set the image's element to position:sticky and top:0. The image will now 'stick' to it's location even if the user scrolls away from it.
You could use position fixed I believe. I adapted this example from w3schools..
https://www.w3schools.com/howto/howto_css_sticky_element.asp
body {
display: flex;
}
div.fixed {
position: fixed;
top: 0;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png");
width: 100px;
height: 100vh
}
p { margin-left: 150px}
<div class="fixed">fixed</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
I have a basic layout with a fixed header like this...
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html, body {
margin:0;
padding:0;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
position:fixed;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
I want the header to be fixed as well as the message, but when I set it to fixed it breaks the layout. Where am I going wrong?
If you're OK with not supporting IE < 11 (https://caniuse.com/#feat=flexbox) use flexbox (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
#message {
flex: 0 0 auto;
padding: 10px;
background: red;
color: white;
text-align: center;
}
header {
flex: 0 0 auto;
height: 50px;
background: teal;
color: white;
text-align: center;
}
.content {
flex: 1 1 auto;
overflow: auto;
background: wheat;
}
<div class="container">
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
</div>
Add another container that you make fixed and the header will be on the good place after removing the message. You may also adjust the padding using JS:
document.querySelector('.content').style.paddingTop=document.querySelector('.fixed').clientHeight+"px";
function myFunction() {
var x = document.getElementById("message");
x.style.display = "none";
document.querySelector('.content').style.paddingTop="50px";
}
html, body {
margin:0;
padding:0;
}
.fixed {
position:fixed;
top:0;
width:100%;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div class="fixed">
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
I do not see what the problem is. If you want the message to overlap, use this code:
#message {
background:red;
color:white;
text-align:center;
padding:10px;
position:absolute;
z-index:100;
}
When you add fixed position to a tag element on html it make the element stay on the screen ignoring the parent element. So if you put position: fixed to an element and top: 0 it says that the element should stay always on view at the top of the screen.
So if it is the behave you are expecting to is that the message and header should scroll and stays always on view then you should also add the position: fixed to your message: element.
#message {
background:red;
color:white;
text-align:center;
padding:10px;
position: fixed;
}
If you want the header to stay put where it is without scrolling along with the screen you should remove the position: fixed from header.
You'll need some javascript because fixed elements are taken out of the position layout, so there's no way to have the browser calculate the top offset of the header with just css.
Here's one solution, which runs a function onload to measure the calculated offset, set the top of the header, then set the message to position:fixed.
It works, but note that if the user changes the size of the browser window, the top property won't be updated and you'll have unexpected results. You'll have to handle that yourself if you like this beginning ;).
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
var header = document.getElementsByTagName("header")[0];
var headerTop = header.offsetTop;
header.style.top = `${headerTop}px`;
document.getElementById("message").style.position = "fixed";
}
html, body {
margin:0;
padding:0;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
position:fixed;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
You are very close. All you need to do is to remove position:fixed; from header class to have it fixed. Here
.header {
background:teal;
color:white;
text-align:center;
width:100%;
height:50px;
}
I am trying to fix this footer. If i remove positon it works fine but some other pages still have a problem. I need this footer at the bottom of every page...
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
background:white;
}
<footer>
<div class="container text-center"> <span>Copyright © 2017 LeagueOn. all rights reserved </span> </div>
</footer>
Try to avoid position: absolute where you don't really need it.
You can achieve this via flexbox. Your footer should be direct child of body:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
This will work even in case of long page:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales molestie orci vitae facilisis. Duis non urna eget felis blandit facilisis vel sit amet purus. Donec finibus ex eget ultrices ultricies. Sed porttitor lobortis mi dignissim lacinia. Phasellus eget iaculis mauris, quis placerat augue. Quisque luctus condimentum neque, sed feugiat ipsum sagittis at. Mauris ut commodo eros.
Sed vel faucibus lacus, efficitur dapibus lectus. Sed consectetur luctus odio. Sed tempus aliquet enim, ac ullamcorper augue tincidunt at. Pellentesque vehicula iaculis elit eleifend viverra. Etiam scelerisque maximus felis. Aenean mollis nisl non eros faucibus mattis. Phasellus dictum venenatis ex vel ultricies.
Suspendisse auctor, nunc at ullamcorper hendrerit, dui enim laoreet nisl, id ullamcorper elit ex in lorem. Ut malesuada ipsum et euismod fermentum. Etiam euismod feugiat lacus eget luctus. Sed tempor vestibulum lectus. Suspendisse tincidunt ut massa ac interdum. Pellentesque mattis sapien in augue imperdiet, vel imperdiet massa convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec consectetur nunc.
Mauris vel sodales ex. Aenean at lectus non libero sagittis aliquam nec eget nisi. Proin massa tortor, iaculis in ante ut, hendrerit sodales sem. Aenean blandit vestibulum dolor et viverra. Mauris non nunc eget odio vulputate viverra. Morbi sagittis nisl at risus convallis vestibulum. Aenean pellentesque sit amet nibh id lobortis.
Ut consequat ligula risus, sit amet congue dolor consequat maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices tellus at placerat hendrerit. Fusce ullamcorper ante id urna scelerisque, eget interdum libero feugiat. Sed consectetur eget metus et euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas malesuada interdum mauris, tempor porttitor odio porttitor eu. Vestibulum sollicitudin justo velit, nec porttitor risus luctus non. Fusce tempor dapibus magna a luctus. Donec ex turpis, venenatis vulputate lacus in, pharetra auctor nisi. Pellentesque dictum elit ut mollis vehicula. Donec vulputate suscipit felis vitae accumsan. Ut fermentum aliquam ipsum sit amet condimentum. Phasellus sollicitudin ligula elit, in efficitur leo dignissim a. Quisque dignissim dolor malesuada interdum interdum.
Nulla congue nibh erat, et tincidunt nulla maximus id. Duis placerat suscipit ex. Integer ut tortor sapien. Vestibulum dapibus sed ex at pharetra. Aliquam blandit facilisis erat. Proin imperdiet cursus arcu, non congue neque tempor nec. Maecenas ut nibh semper, dictum velit sit amet, vehicula nisl. Nullam ac tempor libero. Donec elit lorem, luctus et maximus in, iaculis sed neque. Duis vehicula lacus vitae eros congue, at molestie nisi eleifend. Nulla erat diam, dapibus eu consectetur et, rutrum non quam. Duis imperdiet laoreet elit ac varius. Nulla ultricies pellentesque libero, eget tincidunt tortor elementum quis.
Morbi vitae pharetra ante. Aenean maximus rutrum nunc, eget tempor nunc. Aenean nisi erat, egestas a rhoncus ut, tempus non nisl. Donec venenatis aliquam pulvinar. Sed in tortor neque. Fusce sollicitudin arcu vitae justo faucibus, sit amet sodales neque suscipit. Aliquam in sollicitudin diam. Donec a eros magna. Quisque vel posuere ipsum, quis vehicula odio. Morbi non dolor velit. Vivamus varius velit purus, bibendum volutpat magna eleifend ut. Quisque imperdiet pharetra nunc, id efficitur eros interdum sit amet. Sed commodo maximus risus et iaculis.
Fusce facilisis hendrerit leo. Donec a justo vel velit pellentesque congue et convallis sem. Nullam et urna justo. Donec aliquet mi ac turpis lacinia, in faucibus nunc tempor. Mauris at magna vitae ex volutpat blandit. Integer sed faucibus odio, in congue turpis. Vivamus pellentesque condimentum sagittis. Aliquam fermentum consequat massa non imperdiet.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pellentesque interdum arcu, at tempor tortor tincidunt sed. Aliquam quis odio rhoncus, pharetra ligula vitae, tempus ante. Aenean ultrices ultrices purus eu interdum. Nullam malesuada dui sit amet enim feugiat dignissim. Vestibulum purus orci, fermentum vitae augue ac, semper scelerisque lectus. Etiam congue erat nec eleifend dapibus. Vestibulum vel mattis lacus. Proin urna nunc, sollicitudin quis volutpat varius, posuere vitae elit. Mauris felis ex, elementum et venenatis at, sagittis at quam. Donec nec pulvinar metus. Morbi sit amet tortor tortor.
Sed cursus fermentum nibh, ac fringilla ante dignissim non. Morbi in hendrerit lacus. Nam pulvinar ultricies dolor vitae ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent at neque sapien. Nam nisi velit, porta nec ultricies venenatis, semper sit amet mauris. Praesent sagittis ullamcorper lorem, imperdiet eleifend nisl vehicula quis. Cras ut vulputate metus. Ut in congue enim, vel efficitur tortor.
Integer velit erat, fringilla tincidunt porttitor gravida, pulvinar nec elit. Pellentesque ornare porttitor lorem ut congue. Pellentesque sagittis libero in est tristique feugiat. Suspendisse et ex fringilla dui tincidunt iaculis. Etiam a mollis enim, in scelerisque orci. Sed accumsan viverra nunc, a varius tellus molestie malesuada. Nam nec fringilla tellus, sed facilisis tortor. Nulla sed est sed orci tincidunt tincidunt. Morbi luctus imperdiet mi, eget molestie purus venenatis vel.
Integer venenatis dignissim nisi vel dignissim. Mauris vitae maximus felis, et tincidunt eros. Vivamus luctus scelerisque ligula, nec semper turpis volutpat ut. Ut vestibulum nisi vel justo iaculis, sed congue ante vulputate. Maecenas suscipit, mi at pulvinar tempus, nisl lorem molestie massa, ac vestibulum risus neque sit amet purus. Cras ultrices vulputate eros, a volutpat urna luctus ac. Curabitur viverra nunc in mauris mattis, pretium faucibus nibh convallis. Vivamus fermentum magna consectetur velit condimentum finibus. Vestibulum luctus dolor ut elit dictum, sed posuere ligula aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt nisi tellus, nec iaculis tellus feugiat nec. Vivamus sodales molestie velit, quis porta augue rhoncus ac. Sed elementum mi in est venenatis, vitae posuere risus imperdiet.
Pellentesque scelerisque id urna iaculis interdum. Nulla cursus nibh at quam pretium mattis. Quisque at elit metus. Sed pellentesque, lacus et placerat tincidunt, orci metus rutrum ante, pharetra iaculis urna ipsum ac ipsum. Ut maximus ante sit amet finibus vestibulum. Nam lacinia tellus vehicula, gravida tellus vitae, maximus lacus. Integer placerat enim et fringilla commodo.
Cras non accumsan erat, vel dapibus velit. Sed eu dolor tellus. Integer varius mauris nibh, quis pharetra magna congue non. Aliquam libero nisl, suscipit eu congue id, tristique in magna. Maecenas rutrum magna non tincidunt convallis. Aliquam aliquam, mi ut dictum rhoncus, nisl neque lobortis tortor, at mattis odio eros ut justo. Vestibulum egestas risus nec nisl placerat maximus. Nunc orci purus, egestas at rutrum id, eleifend semper erat. In hac habitasse platea dictumst. Vivamus diam ipsum, aliquam ut placerat ac, ultrices nec arcu. Integer eu ultrices dolor, non luctus orci. Proin sodales pulvinar dui, et sollicitudin tellus dapibus nec. Praesent quis consectetur eros, non ornare tortor.
Curabitur vitae lorem vitae est scelerisque facilisis vitae non augue. Duis erat metus, iaculis a velit et, iaculis vehicula nisl. Mauris tristique pellentesque suscipit. Maecenas a nisl dui. In lacus justo, fringilla ut tortor non, dignissim aliquet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non lectus libero. Proin consequat eleifend justo. Praesent dolor enim, fringilla ut accumsan sit amet, egestas et augue. Nunc mattis dolor quis sodales tempus.
Integer sed ornare dolor. Quisque id dapibus tortor. Quisque ornare, ex quis consequat porttitor, arcu justo aliquet diam, in sollicitudin odio sem laoreet dolor. Ut elit dolor, semper vitae consectetur rutrum, finibus in felis. Nunc volutpat quam ut ligula varius volutpat. Nunc porttitor dictum libero et facilisis. Nam a libero a nisi aliquet mollis. Integer eget ipsum accumsan, interdum elit sit amet, ultrices massa. Nullam nec est id lorem dignissim aliquet nec at urna. Maecenas ante lorem, rutrum ac commodo ac, viverra quis enim. Etiam convallis sapien eu leo dignissim condimentum. Morbi ut ex eu enim fermentum varius at non turpis. Nulla sed libero pharetra, ornare mi sit amet, scelerisque odio. Mauris sit amet mi non mi ornare commodo. Proin eget lacinia erat. Nunc dictum lobortis justo sed vulputate.
Proin ullamcorper finibus nisi egestas aliquam. Sed tempor ornare massa at semper. Integer ultrices diam a libero fringilla faucibus. Proin vitae leo nec neque laoreet imperdiet. Donec mattis gravida massa ac blandit. Aliquam et accumsan urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus elementum est nec iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et sapien orci. Vestibulum ut venenatis velit. Sed sodales volutpat risus vel aliquam. In hac habitasse platea dictumst.
Sed tempus nibh tempus bibendum viverra. Maecenas sit amet magna pretium, pharetra nisl at, ullamcorper elit. Integer ipsum diam, laoreet at consectetur at, rutrum eu mi. Duis et neque mauris. Pellentesque consequat augue et tortor commodo ornare. Nulla sed dui non sem vehicula bibendum vitae nec nibh. Curabitur ut arcu lacus. Donec vel orci dolor. Nam vel nibh a turpis ultricies dapibus rhoncus sit amet lorem. Aliquam condimentum mollis aliquam. Pellentesque laoreet vitae mauris id ornare. In id malesuada nisi.
Phasellus eu aliquam magna, sed efficitur dui. Morbi sagittis tellus vitae velit lacinia, ac molestie massa accumsan. Nullam molestie odio non turpis bibendum rutrum. Donec pellentesque nunc in massa ultrices, a pulvinar ex porta. Curabitur pretium placerat eleifend. Vivamus in dolor id dolor dapibus scelerisque. Etiam pretium placerat laoreet.
Nam at varius nibh, nec ullamcorper tellus. Vivamus ut metus sit amet ligula lobortis ultrices. Vestibulum sed metus id tortor pellentesque dignissim sit amet quis tellus. Integer porta laoreet massa. Fusce tincidunt eros sed neque egestas tristique. Donec eleifend elit volutpat purus sagittis gravida ut vitae purus. Suspendisse a neque id enim euismod egestas et in arcu. Vivamus placerat nulla vel ex dapibus, nec rutrum risus imperdiet. Nam aliquet felis vel turpis varius venenatis. Curabitur a tempus velit, eget vulputate dolor. Nullam feugiat risus risus, in finibus mauris egestas eu.
Donec arcu ligula, pulvinar eu dapibus ut, viverra id ante. Integer in tempus leo, quis finibus felis. Sed sollicitudin libero quis mi vehicula, et blandit tellus porttitor. In in interdum leo. Pellentesque blandit nisi eu quam tempus, vel bibendum augue accumsan. Nam eget suscipit magna, sit amet lacinia velit. Nullam tincidunt, quam a lobortis pharetra, arcu velit pulvinar risus, quis fermentum erat lacus ut neque. Aenean ex elit, feugiat semper vestibulum sed, porttitor at massa.
Proin turpis metus, commodo porta sem non, faucibus hendrerit magna. Nulla sodales gravida quam ac aliquet. Nam posuere lobortis ultricies. Nulla ac odio venenatis, tempor lorem at, varius diam. Suspendisse malesuada lacus vel sapien malesuada, quis faucibus urna eleifend. Donec aliquam erat ut est pellentesque suscipit. Nunc diam lorem, semper et porttitor vitae, commodo eget nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eu dapibus lorem. Aenean auctor, risus vel efficitur fringilla, neque ex elementum augue, eget aliquam arcu risus quis ligula. Sed viverra mauris tortor, ut tempus risus luctus vitae. Vestibulum tincidunt blandit tortor, eu scelerisque nisl pulvinar et. Ut placerat odio urna, at consequat risus sagittis ac. Fusce imperdiet, enim ut commodo auctor, lectus ante efficitur velit, sed ullamcorper dui purus eu nunc. Nam in mauris venenatis, pretium tortor a, accumsan metus.
Donec efficitur suscipit metus id ullamcorper. Etiam ipsum eros, luctus ut maximus non, pellentesque ut dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor leo eu dolor pulvinar, at rutrum nulla volutpat. Curabitur quis mollis augue. Nunc porttitor suscipit odio, laoreet facilisis mi luctus convallis. Nunc urna purus, mattis at sollicitudin eget, pharetra quis sapien. Sed porttitor, lacus sed posuere aliquam, quam odio pellentesque ante, sed volutpat est justo sit amet purus. Aenean consequat condimentum tellus, in sagittis dolor molestie quis. Aenean eget enim sem. Vivamus rutrum mi in magna rutrum, vitae euismod lorem pulvinar. Quisque viverra urna odio, eu tristique orci ultricies eu. Nam facilisis malesuada mattis. Ut tempor nibh eu sapien pellentesque facilisis. Aenean fringilla urna ut lorem viverra, quis condimentum elit iaculis.
Nullam aliquam, leo nec iaculis maximus, nisl nulla pretium leo, vitae iaculis nunc mi sit amet ante. Donec ullamcorper velit vitae dictum placerat. Nulla facilisi. Donec lobortis ut diam et pulvinar. Pellentesque suscipit suscipit aliquet. Nulla et pharetra tellus, nec semper erat. Praesent metus mauris, accumsan ut tempus ut, dignissim eget ante. Nulla eget diam sit amet enim luctus interdum. Quisque volutpat, enim vitae sollicitudin fermentum, odio metus fermentum ante, nec ultrices augue dolor eu eros. Nam eu venenatis dui. Vivamus volutpat accumsan nibh, in tincidunt lorem commodo sit amet.
Ut rhoncus, nunc ut lacinia vulputate, nisi purus efficitur massa, id suscipit ex felis nec mauris. Cras malesuada sapien et congue consectetur. Mauris molestie nisl vel purus convallis rutrum. Sed tristique dictum consectetur. Curabitur justo ante, semper sit amet ultrices at, placerat at lacus. Aenean lorem quam, tempor nec arcu nec, viverra ornare mi. Aenean ante velit, vestibulum non libero a, ullamcorper vulputate lectus. Aenean congue, metus ac lobortis dignissim, elit nunc interdum magna, eu sagittis neque mi vitae nibh. Etiam eget lacus quam. Duis quis augue eget eros congue molestie eget at dui.
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.
I'd like to add a simple separator line in an aspx web form.
Does anyone know how? It sounds easy enough, but still I can't manage to find
how to do it..
10x!
A horizontal rule <hr /> ?
Try the following:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisi arcu, rutrum vel dignissim ac, elementum eu ligula. Mauris faucibus mi sit amet lectus consequat ut lacinia quam fermentum. Donec urna massa, porttitor ac blandit ut, mattis in risus. Ut eget nunc imperdiet nisi ultricies gravida. Integer suscipit ultrices elit, id elementum diam pharetra semper. Nullam tincidunt, tellus id tincidunt sodales, libero sapien porttitor ligula, rhoncus rhoncus eros mauris vel arcu. Proin ullamcorper tellus et purus adipiscing id luctus purus lacinia. Quisque lobortis, enim nec mattis adipiscing, arcu ante tempus eros, vitae sodales nulla urna eget sapien. Cras dui risus, eleifend molestie vulputate eu, varius ut libero. Vivamus consectetur dapibus adipiscing. Cras porta pulvinar felis. Praesent quis velit massa, non interdum neque. Quisque metus quam, tincidunt eu iaculis quis, auctor sed justo.
<hr/>
Nam vitae dui ipsum, id varius urna. Vivamus consequat auctor neque, ac vulputate tellus luctus sit amet. Maecenas vitae libero libero. Nulla et lacus in ante placerat ullamcorper. Pellentesque a erat sapien, convallis rutrum est. In luctus magna a lorem lobortis vel malesuada turpis dictum. Nam condimentum nunc in nunc tincidunt tincidunt. Etiam iaculis lectus at urna faucibus quis facilisis enim imperdiet. Phasellus sit amet viverra nisi. Cras tincidunt enim vel velit cursus elementum. Fusce sodales odio ac erat tincidunt ullamcorper tempor libero interdum. Curabitur a eros ligula. Phasellus sollicitudin dolor cursus lorem porttitor mollis. Nulla non sapien odio, et consectetur nisl. Curabitur convallis bibendum lacus eleifend imperdiet.
</div>
If you want to control its thickness and color, use a style:
<div style="border-top:1px solid red;"/>