I need help aligning my button to the middle (horizontally and vertically) of my screen. The button is over an image. I know there are similar questions like this on here, but I tried every advice and nothing seemed to work. I think it might be because my button is on top of an image that is at 100% in width and height, in other words, the image is a fullscreen image that takes up the whole page.
My button is at the top left corner of the screen.
body {
width:100%;
height:100%;
background-image: url("space.jpg");
}
.button {
margin:auto;
display:block;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
<img src="space.jpg">
Update:
Create a <div> with fixed dimensions and add your background to it.
Adjust the size of the <div> according to your needs.
Put your button inside that <div>
Position the button inside the <div> and give it position:absolute - in relation to its parent
Use the transformproperty as well as top / left / right / bottom
/* relevant starts here CSS */
.mycontent {
width: 100vw;
max-width: 100%
}
.button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background: #fff;
font-size: 1.2em;
border: 1px solid #777;
padding: 0 .6em;
color: #000;
opacity: .6;
}
.button:hover {
opacity: 1;
cursor: pointer;
}
.topcontent {
height: 100vh;
width: 2560px;
max-width: 100%;
background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
background-size: cover;
}
.othercontent {
background: #010101;
padding: 20px 40px 20px 40px;
}
/* irrelevant starts here CSS */
body {
max-width: 100%;
padding: 0;
margin: 0 auto;
color: #999;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
margin: 0 auto;
padding: 20px;
text-align: justify;
text-justify: inter-word;
}
<body>
<div class="mycontent">
<div class="topcontent">
<button class="button">Menu</button>
</div>
<div class="othercontent">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
</div>
</div>
</body>
You can do that using CSS3 flex-box concept.
absolute center property
set parent (here it's wrapper): display:flex;
then set child (here it's button): margin:auto;
It will be positioned on absolute center. I've added the snippet below.
html,body {
height:100%;
width:100%;
}
.wrapper {
display:flex;
align-items:center;
width:100%;
height:100%;
background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.button {
width:100px;
margin:auto;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
please add this code into your css :
button {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
}
img {
width: 100%;
}
Hope it will work for you
Thanks
Try this one:
body {
width: 100%;
height: 100%;
position: relative;
}
img {
width: 100%;
}
button{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: #000;
padding: 6px 12px;
border: solid 1px #000;
border-radius: 5px;
color: #fff;
min-width: 150px;
}
Try this:
.wrapper {
width:100%;
height:100vh;
background-image: url("https://unsplash.it/800/400/");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
display:block;
}
.button {
width:100px;
position: absolute;
bottom:50%;
left:50%;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
Related
This is a very strange problem I've encountered. Everytime I add more content to the main content the sidenav links aren't able to be clicked on. Here is an example of the sidenav without main content:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
</div>
</body>
Here is an example with main text:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
</body>
Maybe I messed something up with the <style> section? I mostly don't really know what is happening around there, especially with margins and padding and maybe I've overridden the margins with the main body. I have also seen examples of sidebars made as an entirely different html page within another, and maybe that could help. If you could also help me figure out how to fix the sidebar as well as make it scrollable instead of it filling the whole page, that would be appreciated, thanks.
The z-index property specifies the stack order of an element:
div.sidenav {
width: 240px;
position: absolute;
z-index: 10;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
also it is better to use flex or grid
I am trying to make a simple responsive "about" page.
Everything works till I resize the browser to a smaller window.
HTML
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>My name is...[lorem200words]</p>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
height: 2457px;
background-image: url('../images/wallpaper.jpg');
}
#area-container {
display:inline-block;
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -60%);
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
}
https://jsfiddle.net/a4uaquyp/3/
The problem is that the whole textarea div seems to jump out of the browser, when I add the overflow to the body it won't let me scroll up enough.
There's also for some reason a lot of excess space below.
I tried using media querys to somehow push the #content down a bit with margin-top and vw/vh, I can't really think of anything else.
The problem is your use of transform: translate(-50%, -60%), in combination with your margin-top: 50vh and margin-left: 50vw. While this offsets the content, it will overflow it if there is too much to display.
Instead, if you want to center a lot of content, I would recommend flexbox. This allows you to achieve your desired result with only a few lines of code:
#content {
display: flex;
align-items: center;
justify-content: center;
}
#area-container {
max-width: 50%;
}
This can be seen in the following:
#import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
background-image: url('../images/wallpaper.jpg');
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px; /* Just to give space at the bottom */
}
#area-container {
max-width: 50%;
}
#textarea {
background-color: #fff;
box-shadow: 0 0 3em #ccc;
border-radius: 10px;
padding: 10px;
}
#area-container h1 {
text-align: center;
text-transform: uppercase;
font-size: 5vw;
}
#area-container h1:before,
#area-container h1:after {
content: '-';
font-weight: normal;
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
#area-container h1 {
font-size: 40px;
}
}
<body>
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>y name is... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit repudiandae veritatis hic facere non aperiam sunt dolor, ut enim? Sunt tempora et saepe quae, optio fugiat, eaque corrupti dignissimos modi tenetur sint corporis
dolore. Harum sunt eligendi, facilis, quos obcaecati consequatur earum, qui molestiae ducimus inventore optio. Minus quas sed, fugit fuga culpa neque magni quisquam doloremque tempora ad, et quia possimus voluptatibus enim iusto esse omnis recusandae
in eos provident nobis totam aliquid. Iste fugit tenetur, odio voluptates impedit veritatis reiciendis. Enim eaque quod repudiandae velit eum, quo commodi, odio quasi quos laboriosam iusto dolores laborum sapiente tenetur nihil sunt, nam nostrum
at accusamus id facere magnam! Quibusdam sint, velit similique harum alias neque doloremque labore iste officia repellat quae dolorum suscipit ad nostrum eaque quisquam, amet voluptatibus, laborum sit quaerat dolorem sunt laudantium. Nam necessitatibus
repellendus ipsum officia nulla commodi. Eveniet amet fuga, dolores voluptas nemo impedit laudantium facere, eum iste officiis perspiciatis. Quae ipsa eligendi dolor laborum optio ipsam commodi temporibus sequi, adipisci nobis facere, iste deserunt
architecto rem odit ullam, tenetur fuga veniam. Sed maiores libero odio nostrum officia, dolores expedita quisquam asperiores eligendi ad soluta incidunt earum, vitae, omnis esse voluptatum perferendis ab commodi.</p>
</div>
</div>
</div>
</body>
Also note that you don't probably want to restrict the height of #content. I've removed the height: 2457px from my above snippet.
I'm trying to put an image on the left side, and text on the right side. I've managed to do this, however, the text goes all the way till the end of the page until it breaks off onto a new line, which is not what I want it to do. I'd like it to stop around the same Y position as my navigation bar stops, but I'm not sure how to do it. I've looked around and tried a few different methods, but none of them seemed to work.
MY HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoL</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#Best champions for each role"><img src="assets/lol.png" alt="Logo"
id="image1"></a>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>Farming</li>
<li>Best champions for each role
</li>
</ul>
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<p1>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p1>
<banner></banner>
</body>
</html>
MY CSS
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
width: 30%;
right: 200px;
margin-left: 285px;
float: left;
border: 5px;
border-style: groove;
border-color: black;
}
ul {
top: 150px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 5px;
}
As you designed all different tags in your CSS you should also design the p1text properly.
A dirty and quick fix would be something like:
p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 50px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
}
Change your current p1 css to this one. This is NOT clean code, but as you noted it's a school project which need to be done within 6 hours, just do it dirty as above.
Good luck at your school's project.
I am simply trying to center my bg-text within the outer div, therefore having a picture in the background with the h1 tag in the center for all devices. I originally had this where the margin-top was a fixed pixel. I need it to be a percentage so it stays in the center. However, when i replaced the margin top with a percentage, as a minimize my screen the h1 element would slide upwards. I want it to stay margin-top: 50% of my background picture at all times.
HTML
<div class= 'bg'>
<div class='bg-text'>
<h1>Text</h1>
</div>
</div>
CSS
.
.bg {
display: table;
width: 100%;
height: 50%;
background-image: image-url('pic.jpg');
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.bg-text{
color: #fff;
text-align: center;
text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
margin-top: 150px;
}
.bg-text h1{
font-size: 50px;
font-weight: 700;
}
Use flex property for align the inner div in center
.bg {
display: flex;
align-items:center;
width: 100%;
height: 300px;
background-image: url('pic.jpg');
background-attachment: scroll;
background-color: red;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.bg-text{
color: #fff;
text-align: center;
text-shadow: 1px 1px 12px rgba(0,0,0,0.5);
}
.bg-text h1{
font-size: 50px;
font-weight: 700;
}
have a look here
https://jsfiddle.net/pteus556/
Supports in browsers.
A second way to potential do that is to use transform: translateY(-50%);. Check out the fiddle for a little demo: https://jsfiddle.net/y58hu6tv/2/.
.bg {
width: 100%;
height: 500px;
background-color: rgba(0, 0, 0, .7);
}
.bg-text {
position: relative;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
text-align: center;
background-color: rgba(255, 255, 255, .7);
}
Again though with this technique browser support is so-so.
Reference: http://caniuse.com/#feat=transforms2d
Create a <div> with fixed dimensions and add your background to it.
Adjust the size of the <div> according to your needs.
Put your text inside that <div>
Position the text inside the <div> and give it position:absolute - in relation to its parent
Use the transformproperty as well as top / left / right / bottom
.mycontent {
width: 100vw;
max-width: 100%;
}
.mytext {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background: rgba(255, 255, 255, .6);
border: 1px solid #777;
padding: .2em;
color: #000;
}
.topcontent {
height: 100vh;
width: 2560px;
max-width: 100%;
background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
background-size: cover;
}
.othercontent {
background: #010101;
padding: 30px;
}
body {
max-width: 100%;
padding: 0;
margin: 0 auto;
color: #999;
}
p {
margin: 0 auto;
padding: 20px;
text-align: justify;
text-justify: inter-word;
}
<body>
<div class="mycontent">
<div class="topcontent">
<span class="mytext">your text goes here</span>
</div>
<div class="othercontent">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
</div>
</div>
</body>
With the following HTML and CSS
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
The inner div takes up the full head of the container as desired. If I now add some other, flow, content to the container such as:
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
Then the container scrolls as desired, however the absolutely positioned element is no longer anchored to the bottom of the container but stops at the initial view-able bottom of the container. My question is; is there any way of having the absolutely positioned element be the complete scroll height of its container without using JS?
You need to wrap the text in a div element and include the absolutely positioned element inside of it.
<div class="container">
<div class="inner">
<div class="full-height"></div>
[Your text here]
</div>
</div>
Css:
.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }
Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.
* {
box-sizing: border-box;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
float: left;
margin-right: 16px;
}
.inner {
position: relative;
height: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
height: 100%;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
<div class="container">
<div class="inner">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
</div>
http://jsfiddle.net/M5cTN/
position: fixed; will solve your issue. As an example, review my implementation of a fixed message area overlay (populated programmatically):
#mess {
position: fixed;
background-color: black;
top: 20px;
right: 50px;
height: 10px;
width: 600px;
z-index: 1000;
}
And in the HTML
<body>
<div id="mess"></div>
<div id="data">
Much content goes here.
</div>
</body>
When #data becomes longer tha the sceen, #mess keeps its position on the screen, while #data scrolls under it.
So gaiour is right, but if you're looking for a full height item that doesn't scroll with the content, but is actually the height of the container, here's the fix. Have a parent with a height that causes overflow, a content container that has a 100% height and overflow: scroll, and a sibling then can be positioned according to the parent size, not the scroll element size. Here is the fiddle: http://jsfiddle.net/M5cTN/196/
and the relevant code:
html:
<div class="container">
<div class="inner">
Lorem ipsum ...
</div>
<div class="full-height"></div>
</div>
css:
.container{
height: 256px;
position: relative;
}
.inner{
height: 100%;
overflow: scroll;
}
.full-height{
position: absolute;
left: 0;
width: 20%;
top: 0;
height: 100%;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
I ran into this situation and creating an extra div was impractical.
I ended up just setting the full-height div to height: 10000%; overflow: hidden;
Clearly not the cleanest solution, but it works really fast.
Not that there's anything wrong with any of the other answers, but just for fun, I copied the original snippet and all I changed was height to min-height and I didn't have to add another <div> anywhere.
.container {
position: relative;
border: solid 1px red;
min-height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
.bottomDiv {
position: relative;
bottom: 0;
}
.parentDiv {
display: flex;
flex-direction: column;
}
.theDivPlacedOnTopofBottomDiv {
flex-grow: 1 !important;
}