An scrollable div is easy to implement if it's height is minor than the browser's window height. Example: https://jsfiddle.net/y59ttm8s/4/ You can scroll the red div with an 'inner scrollbar', and that's fine.
HTML
<div class="scrollable">
<div class="content"></div>
</div>
CSS
.scrollable {
margin-left: 30px;
float: left;
height: 400px; // with a fixed height!
width: 65px;
background: red;
overflow-y: scroll;
}
.content {
height: 1450px;
}
Now, check the example modified: https://jsfiddle.net/y59ttm8s/5/ where the height of the scrollable div is 100%. I can't scroll anymore with the inner scrollbar, just with the browser's scrollbar.
CSS updated
.scrollable {
margin-left: 30px;
float: left;
height: 100%; // 100% !
width: 65px;
background: red;
overflow-y: scroll;
}
.content {
height: 1450px;
}
So, how I can force to scroll with the div's scrollbar instead of the browser's one?
You need to give the body a height or else the scrollable doesn't have from where to get its height.
html, body {
margin: 0;
height: 100%;
}
.scrollable {
margin-left: 30px;
float: left;
height: 100%;
width: 65px;
background: red;
overflow-y: scroll;
}
.content {
height: 1450px;
}
<div class="scrollable">
<div class="content">
</div>
</div>
A second option is to change it to viewport units.
html, body {
margin: 0;
}
.scrollable {
margin-left: 30px;
float: left;
height: 100vh;
width: 65px;
background: red;
overflow-y: scroll;
}
.content {
height: 1450px;
}
<div class="scrollable">
<div class="content">
</div>
</div>
Hope this given below snippet will help you.
body{margin:0; padding:0;}
.scrollable {
margin:0;padding:0;
margin-left: 30px;
height: 100%;
width: 65px;
background: red;
overflow-y: scroll;
position:absolute;
top:0;
}
.content {
height: 1450px;
}
<div class="scrollable">
<div class="content"></div>
</div>
Related
I have been searching for how to create the aspect ratio of divs using the CSS stylesheet; I could successfully create a demo. The aspect ratio works fine but I can not find a way to set the height of my container if its width and height ratio is bigger (#1 scenario).
I managed to successfully create the #2 scenario. But when I try to create #1 scenario, the container's height expands, here is my code:
HTML, body {
margin:0;
padding:0;
height:100%;
}
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}
#container:hover {
width: 500px; /* Only increasing the width */
height: 300px;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
if you hover over it, only the container's width will be increased, not the height
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
The height of the container should not change, but it is
</body>
</html>
Note: I've only added padding to the divs so it would be easier to visualize where they currently are. Also, ignore my poorly made demo, I am a beginner in HTML and in CSS and I might have missed something very obvious.
Edit: I have made a hover action on css so you can see the aspect ratio working
The problem is with your two inner elements' padding-bottom. Because of the box model, when you apply a percentage-based padding to an element, it calculates based off of the parents (bubbling) width, ignoring the **height.
To resolve this, simply set a fixed padding-bottom:
HTML,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: khaki;
padding: 10px;
width: 350px; /* Increased for demo */
height: 150px; /* To fit within snippet */
display: table;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75px;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75px;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to have the child actually exceed the parent container, then you'll want to use negative margin.
I have a full-width #body-container and a fixed width .bg-container on top of that. Both are minimum 100% of the available height.
So my footer is again on top of that - at the moment. But I want it to be after the #body-container.
So my question is: How do I need to adjust my setup to get the footer sticky?
As pen
html,
body {
height: 100%;
margin:0;
padding:0;
}
#body-container {
height: 100%;
min-height: 100%;
overflow:auto;
background-color: red;
}
.bg-container {
width: 920px;
margin: 0 auto;
background-color: blue;
min-height: 100%;
}
.pseudo-content{
background: yellow;
height: 1000px;
}
footer{
background: green;
height: 50px;
}
<div id="body-container">
<div class="bg-container">
<div class="pseudo-content">content</div>
</div>
</div>
<footer>
footer
</footer>
So, you need that your footer always be displayed?
Then, just add the following styles to your footer:
position: fixed;
bottom: 0;
width: 100%;
Complete:
footer {
position: fixed;
bottom: 0;
width: 100%;
background: green;
height: 50px;
}
I'm trying to make a div the same width as the containing image with height:100% and width:auto.
With display:inline-block it seems to work but only if you don't resize the browser. The div slide always keep the initial width. How can I change this behavior?
This is my code:
CSS:
html{
width: 100%;
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.gallery{
height: 80%;
width: 100%;
}
.slide{
background-color: #000;
height: 100%;
width: auto;
display: inline-block;
margin: 0;
padding: 0;
}
img{
width: auto;
height: 100%;
float: left;
opacity: 0.5;
}
HTML:
<body>
<div class="gallery">
<div class="slide">
<img src="http://lorempixel.com/300/200/nature/1">
</div>
</div>
</body>
or here:
https://jsfiddle.net/ykzokoxd/
Fix:
.element{
-webkit-animation: ibfix infinite 1s;
}
#-webkit-keyframes ibfix {
from {max-width:100%;padding:0;}
to {max-width:99.9%;padding:0.01%}
}
Edit: "Repainting/refreshing inline-block element, so width is adapting to child img"
https://jsfiddle.net/ykzokoxd/2/
I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
Could you please give a html code for the following?
I need to display div and iframe horizontally fitting the whole page. But I need div to be fixed size (100px) and iframe fitting the remaining space.
Thanks
Fiddle
CSS
div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}
HTML
<div>hi</div>
<iframe src="http://www.google.com/"></iframe>
EDIT:
To avoid horizontal scrollbar define width in % to both the elements - Updated Fiddle
http://jsfiddle.net/gZNKk/1/
<html><head>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#left {
float: left;
width: 100px;
background: blue;
height: 100%;
}
#right {
width: auto; /* This is the default */
float: none;
margin-left: 100px;
background: red;
height: 100%;
}
#right-iframe {
background: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<iframe id="right-iframe"></iframe>
</div>
</body></html>
EDIT: Fixed the extra spacing on the right causing the scrollbar to appear.
CSS:
#content-wrapper {
width: 100%;
overflow:hidden;
}
#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}
#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}
HTML:
<div id='content-wrapper'>
<div id='content-left'></div>
<div id='content-right'><iframe src="http://www.google.com"></div>
</div>
Width you can adjust, whatever you required.
Try this,
http://jsfiddle.net/anglimass/UUmsP/15/