I'm trying to get a row of 3 cards, whereby the row extends to the max-height of card #1 or card #2 based on their content, and the third card to also get the same max height but overflow-y:scroll even when the content is longer than cards 1 & 2.
I can get the first two cards extending to the tallest of either, but can't seem to limit the third card to this height.
EDIT: Solved with JS > https://codepen.io/chrisj75/pen/jOmbEEQ
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title> <body>
<div class='container'>
<input type='button' value='Fix Height' onclick='fixHeight();' />
<div class='row'>
<div class='card-group col-md-12'>
<div class='card col-md-4'>
<div id='card1'>
Card #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id mollis tellus. Proin faucibus mauris non felis placerat, non posuere nibh tristique. Quisque elementum quam urna, tempus iaculis augue convallis ullamcorper. Proin ac laoreet augue. Morbi quis ipsum turpis. Nullam finibus blandit sem, fringilla semper diam tincidunt quis. Nam venenatis dictum eleifend. Donec rutrum non lectus et lobortis. Donec congue, nunc eget consectetur tempus, massa arcu ornare eros, ac scelerisque mauris velit ut libero.
</div>
</div>
<div class='card'>
<div id='card2'>
Card #2
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenxatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
<div class='card col-md-4'>
<div id='card3'>
Card #3
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
</div>
</div>
CSS
#card1, #card2, #card3 {padding:2rem;}
#card3 {overflow-y:scroll;}
.hidden {display:none !important;}
JS
function fixHeight() {
$('#card3').addClass('hidden');
var card1 = $('#card1').height() ;
var card2 = $('#card2').height() ;
h = Math.max(card1,card2) ;
//window.alert(h);
$('#card3').height(h).removeClass('hidden')
}
Related
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>
Currently, I have a nav element floated left and a div floated right. How would I make each of them have an independent scroll bar, i.e. so they don't scroll in sync? I've tried adding overflow-y: auto to both without any success. FYI, I'm using Tailwind CSS.
Here's a quick example using flex
The complex interactions of float and overflow are well documented and were often used as a clearfix for floated layouts.
Since you're using Tailwind you should definitely be leveraging their flexbox or grid template styles for what you are describing.
Tailwind example:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex flex-row">
<nav class="bg-gray-600 w-1/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div class="bg-green-600 w-3/4 flex-none p-4 overflow-y-scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
Plain CSS example:
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
nav {
background-color: gray;
overflow-y: scroll;
flex-basis: 25%;
padding: 1rem;
}
#right {
background-color: green;
overflow-y: scroll;
flex-basis: 75%;
padding: 1rem;
}
<div class="container">
<nav>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</nav>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est, viverra ut interdum id, iaculis id nunc. Maecenas est ipsum, malesuada at elementum a, placerat a lorem. Morbi scelerisque neque at massa malesuada, et condimentum metus elementum. Donec dignissim mattis arcu, varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc dui, pellentesque a ipsum vel, dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi, consequat vehicula sodales in, placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque, dapibus sit amet tellus et, mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
</p>
<p>
Phasellus suscipit quis nisl id aliquet. Duis convallis, lorem quis laoreet posuere, enim dolor feugiat dolor, malesuada cursus est erat sit amet augue. Ut vulputate risus nulla, in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan, non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui, rutrum condimentum scelerisque ut, efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus, feugiat sollicitudin nunc at, blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam, feugiat vitae nunc non, hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere, placerat nulla eget, accumsan nisi.
</p>
<p>
Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus, ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla, consectetur turpis nec, molestie arcu. Morbi ullamcorper ex justo, at porttitor dui aliquet non. Curabitur ut bibendum nisl, vel varius purus. Praesent arcu felis, facilisis ut nibh id, ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
</p>
<p>
Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam, id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit, fringilla nunc id, venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales, eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus, in volutpat diam. Aliquam molestie ligula eget lacus tincidunt, ut ultrices purus sodales. Nulla varius ante tortor, non tempus odio posuere sit amet.
</p>
<p>
Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante, sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat, rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra, nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor, aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar, et aliquam massa commodo.
</p>
</div>
</div>
I like to do that with flex. The key is to set min-h-0 on the flex parent. Otherwise, it will just grow with the children and then the whole body will start scrolling. In this example it will also have individual scroll bars on the x-axis if needed.
Note that the inline style on the p tag is just to give some large content to the sidebar and the main area.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen w-screen min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 text-white border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="h-full flex-1 overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</div>
It becomes more challenging when you want to have something on top or below like a navbar and footer. This is where you really need the minimum height.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen w-screen min-h-0 min-w-0">
<nav class="p-1 border-b bg-gray-200">navbar</nav>
<section class="flex flex-1 min-h-0 min-w-0">
<aside class="h-full w-64 bg-teal-900 border-r overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</aside>
<main class="flex-1 h-full overflow-auto">
<p style="height: 200%">
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
book it has?
</p>
</main>
</section>
</div>
I am creating a html/Angular app.
I am using Twitter bootstrap 4 for layout.
I got three columns 1-2-9 and I need them all to be 1) Same height 2) Always full height of the window.
This I solve with 100vh and it looks good BUT the problem is that since my app can add dynamic content in a long list the columns "stop" being the full height of the screen (since 100vh calculates height when first loading the page).
How can I make sure my columns always adjusts automatically to the full height of the window/browser no matter how much dynamic content I add to it?
I think you want to scroll the dynamic content within the fixed 100vh columns. If so, you can wrap the inner dynamic content within a div and use overflow properties for larger data.
Example:
HTML:
<div class="row">
<div class="col-md-1 col-lg-1 col-xl-1 column column-first">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 column column-second">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-9 col-lg-9 col-xl-9 column column-third">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
</div>
CSS:
.column{
height: 100vh;
overflow-x: hidden;
}
.scrollable-text{
width: calc(100% + 30px);
overflow-y: scroll;
box-sizing: border-box;
height: 100%;
}
.column-first{
color: #fff;
background-color: #02547D;
}
.column-second{
color: #fff;
background-color: #0285A8;
}
.column-third{
color: #fff;
background-color: #02BEC4;
}
CodePen:
https://codepen.io/debrajr/pen/gqZbpx
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;"/>