I have a Bootstrap built website which contains an overlay footer which open upon clicking the footer menu.
Inside this footer is a scrollable content area which works correctly when a fixed height is set on the scrollable div. As the site is responsive I need this scrollable area to be a percentage height which seems to stretch out of the visible window.
An example is here: http://jsfiddle.net/JUESu/5/
#footer-content {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 1;
display: block;
color: #7f7f7f;
height:85%;
}
.scrollable {
overflow-y: scroll;
height: 50%; /* Doesnt Work */
/*height: 300px; /* Works */
width: 95%;
background: red;
}
How can I have a scrollable div inside a fixed position container?
Giving maximum height should fix it
.scrollable {
overflow-y: scroll;
max-height:300px;
height: 50%;
width: 95%;
background: red;
}
Here is the fiddle
http://jsfiddle.net/JUESu/10/
Related
I have an image that eventhough it has a parent set to overflow: hidden still overflows and creates a horizontal scroll on the page. Shown here
Here is the relevant code:
.section2img {
overflow-x: hidden !important;
height: min-content;
position: relative;
width: 50vw;
right: -60%;
top: 0;
}
.section2 img {
position: relative;
overflow-x: hidden !important;
}
GitRepo if needed
So what you can do is set the width of the img so it match with the website and then add object-fit: cover; to the img, what it does is to cut the part that overflows.
Background
I need to have an image larger than its container. The idea is to give the users the option to add full-width images to content pages, if they want to.
Problem
I used calc(100vw) with left: 50%; and translateX(-50%). This works perfectly in Chrome and Firefox. However, IE11 and Edge bring a horizontal scroll bar.
Code
HTML
<div>
<img />
</div>
CSS
div {
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: calc(100vw);
}
Fiddle
Here's an example so you can test and play: https://jsfiddle.net/Cthulhu/nbmy5mjf/1/
Question
How can I remove/hide the scroll bar from IE and Edge?
I thought this happened due to the way the image's position is being calculated. However, I noticed that Firefox and Chrome also show a scroll bar if I remove the display: block; from the image. Any ideas?
use
body {
overflow: hidden
}
or just:
body {
overflow-x: hidden
}
and drop the calc() it isn't doing anything there.
Snippet
body {
overflow: hidden
}
div {
border: 5px solid red;
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: 100vw;
overflow: hidden
}
<div>
<img src="http://randomrab.com/wp-content/uploads/2015/05/thumpimage.jpg" />
</div>
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
I have a parent div with two child div(header and body), I want to set header position fixed on top and only body should scroll.
HTML
<div class="box">
<div class="header">Header</div>
<div class="body">Body</div>
CSS
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: absolute;
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
I found the header div overlaps parent div's scroll bar. I can't set parent div position as relative because I want header position fixed. I can't set header position as 'fixed' because this content avilable somewhere middle of the page.
How can I avoid absolute positioned child not overlaps parent's scroll bar?
Find jsfiddle: http://jsfiddle.net/T43eV/1/
The overflow property should be set on the .body, not .box, as such : http://jsfiddle.net/T43eV/8/
Does this help?
.box { position:relative; }
EDIT: There isn't any need to use absolute anyway, remove that and put overflow:auto on .body.
jsFiddle
.box {
height: 300px;
border: 1px solid #333;
}
.header {
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 200px;
background: #999;
width:100%;
overflow: auto;
}
EDIT: I don't think you can do this consistently across platforms. You could kind of do it by setting your right property on .header to be as large at the scrollbar, but the size of the scrollbar is bound to the operating system and isn't a single size.
You could look into an iframe as that will create a page within your page, scrollbar and all.
If it helps set z-index:-1 in .header and the header will not overlap the scroll bar.
Here is the working fiddle:
http://jsfiddle.net/T43eV/28/
One way of doing it would be by using a sticky position. This will keep the header inside the scrollable div but won't make it overlap the scroll (or get behind the scroll if you set a lower z-index)
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: sticky;
top:0;
height: 100px;
margin-bottom:-100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
However this is not supported by internet explorer
I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.
The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.
This is basically it: http://imgur.com/TNaTU
So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.
Is there a way to do this without Javascript?
This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
I will have a look at making this work in IE7 if it's a requirement for you.
Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.
Live Demo (edit)
HTML:
<div id="top">top stretch</div>
<div id="middle">
<div id="middleContainer">
<div class="stretch">left stretch</div>
<div id="fixed">fixed</div>
<div class="stretch">right stretch</div>
</div>
</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top, #bottom {
position: absolute;
left: 0;
right: 0;
text-align: center
}
#top {
top: 0;
height: 50%
}
#bottom {
bottom: 0;
height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
position: absolute;
right: 0; bottom: 0; left: 0
}
#fixed {
width: 400px
}
#middle {
background: #ee1c24;
position: absolute;
width: 100%;
height: 300px;
top: 50%;
margin-top: -150px; /* height/2 */
left: 0;
z-index: 1
}
#middleContainer {
display: table;
width: 100%;
height: 100%
}
.stretch, #fixed {
display: table-cell
}
/* just for demo */
#top, #bottom, .stretch {
background: #b5e61d;
border: 5px solid #000
}
#fixed {
border-top: 5px solid #000;
border-bottom: 5px solid #000
}