<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
Related
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
I have a bootstrap layout with two columns. On screens higher then 1000px content block is not stretch to the footer. I need it to expand vertically depending on the height of the user's browser window.
I've tried height:100%, min-height:100%; etc.
See my code below.
<div id="wrapContent" class="wrapContent">
<div class="container">
<div class="row">
<header>
HEADER
</header>
</div>
</div>
<div class="container">
<div class="row">
<div id="content" class="content clearfix">
<div class="col-xs-12">
<div class="flex-container">
<div class="col-xs-8 leftBlock">
LEFT BLOCK
</div>
<div class="col-xs-4 rightBlock">
RIGHT BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<footer>
FOOTER
</footer>
</div>
</div>
html,body {
height: 100%;
min-height: 100%;
font-size: 1.2em;
}
.wrapContent {
overflow: visible !important;
height: auto !important;
min-height: 100%;
margin: 0 auto -71px;
padding-bottom: 70px;
background: #323742;
}
.container {
width: 1170px !important;
margin: 0 auto;
}
header {
overflow: visible;
height: 189px;
background: #222;
color: #fff;
}
.content {
min-height: 516px;
}
.flex-container {
min-height: 516px;
overflow: hidden;
margin-right: -15px;
margin-left: -15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.leftBlock {
background: #fff;
}
.rightBlock {
background: #ccc;
}
footer {
background: #222;
height: 71px;
color: #fff;
}
.div{
height: 100vh;
}
Add these lines to whatever container you want to stretch and it should work. I have tried it already :)
In your case:
.leftBlock, .rightBlock{
height: 100vh;
}
try this code, I think this is what you want.I wrote a full code for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.Header{
background-color: gray;
color: white;
height: 189px;
font-size: 25px;
}
.Bone{
background-color: orange;
color: white;
height: 400px;
color: white;
}
.Btwo{
background-color: red;
color: white;
height: 400px;
color: white;
}
.Footer{
background-color: black;
color: white;
height: 70px;
font-size: 25px;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr><div class="col-md-12 Header">Header</div></tr>
</thead>
<tbody>
<tr>
<div class="col-md-8 Bone">Left Block</div>
<div class="col-md-4 Btwo">Right Block</div>
</tr>
</tbody>
<tfoot>
<tr><div class="col-md-12 Footer">Footer</div></tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
just copy,paste and run it.if this is not the case tell me.
Thanks to everyone!
I've just wrote simple JS, and everythings works ok
function rightBlockHeight() {
var height = $( window ).height() - $( '#footer' ).height() - $( "#header" ).height();
$( '#content' ).css( 'min-height', height );
$( '.rightBlock' ).css( 'min-height', height );
}
$( document ).ready( function() {
rightBlockHeight();
} );
$( window ).resize( function() {
rightBlockHeight();
} );
Please help a Java guy with a simple CSS problem. Been trying for hours and can't find a proper solution to the problem: How to stretch the background color of a child element so that it has the same height as the parent element while using float? I bet it has something to do with display:flex, but I can't get it to work :-/
Here's the code: https://jsfiddle.net/bycor29w/
Goal: Right column background colour must be filled to the same height as the middle column no matter how much or little text it contains
Requirement: Must use float
StackOverflow demands: "Links to jsfiddle.net must be accompanied by code", so here you go:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
div {
border: 1px #000 solid;
}
.container {
height: 100%;
width:980px;
float:left;
display: flex;
}
.left {
width: 200px;
float: left;
}
.mid{
padding-top: 1px;
width: 560px;
float: left;
}
.right {
background: #d8d8d8 repeat-y bottom right;
padding: 0 20px;
height:100%;
align-self: center;
flex: 1;
width: 180px;
float: left;
}
</style>
<div class="container">
<div class="left">
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="mid">
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
</html>
Firstly, Flexbox will override floats...if you want to use floats...don't use flexbox.
What you seem to want can be achieved using CSS tables....you can still use floats if absolutely necessary.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
border: 1px #000 solid;
}
.container {
width: 580px;
display: table;
overflow: auto;
vertical-align: top;
}
.left {
width: 100px;
float: left;
display: table-cell;
vertical-align: top;
}
.mid {
padding-top: 1px;
width: 370px;
float: left;
display: table-cell;
vertical-align: top;
}
.right {
background: lightblue;
width: 100px;
display: table-cell;
vertical-align: top;
}
<body>
<div class="container">
<div class="left">
asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="mid">
asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.