I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
I have a grid layout with text and images which I want to print and I want only the page to break in the text row, and not break in images, my grid code has two rows, one for text and one for images, and the images inside the grid is another grid for the images, the code looks like this:
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"text"
"sub-grid";
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "picture-one picture-two";
}
}
I've done a lot of tests with the page break inside:
#media print {
.sub-grid {
page-break-inside: avoid;
}
}
but never seems to work, it's always breaking the page on images when printing.
Here's a fiddle to reproduce:
https://jsfiddle.net/kwp59x3g/15/
Any help is welcome, thank you guys.
I think the problem is in .grid class. Remove .grid class and add these lines:
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'picture-one picture-two';
}
.picture-one {
grid-area: picture-one;
}
.picture-two {
grid-area: picture-two;
}
#media print {
* {
overflow: visible !important;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
}
<button onclick="window.print()">
Print
</button>
<div class="grid">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
Curabitur fermentum odio sit amet luctus sollicitudin.
</div>
<div class="sub-grid">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
</div>
</div>
You can break a page break (using a page break inside) with:
tables
floating elements
block elements with borders
display: grid and display: flex don't correctly work it look like some old bug. link
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 able to display content on image in desktop but when i am resizing my browser my content not showing properly.
So issue is how to set background image with full content?Please check my below images you will get idea what i am asking?
My background image height is 500px.
Would you help me in this?
Thanks in advance.
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
p{
color: red;
}
.test-1
{
background-image:url('images/images-bg.png');
background-repeat: no-repeat;
width: 100%;
height: auto !important;
background-position: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test-1">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
</div>
</div>
</div>
In Desktop There is no issue in this
After resizing
Just edit the CSS, and add background-size
.test-1 {
background-image:url('images/images-bg.png');
background-size:cover;
background-repeat: no-repeat;
width: 100%;
height: auto !important;
background-position: center;
}
You can read more about background-size in HERE
remove the width 100% and set background-size: cover and also remove the html, body section. Your using bootstrap so you don't need to define that
p {
color: red;
}
.test-1 {
background: url(http://www.hollanders.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/i/sil370523644_1_2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test-1">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
</div>
</div>
</div>
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.