actually how to make the div inside a row equal to 100% height, i mean the left sidebar will following height, depending on the right content,
just try give a height: 100%; but it doesn't work, some advice will be appreciated
<body>
<div class="content">
<div class="container main">
<div class="row 2-col">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 left">
<p>Sidebar</p>
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 right">
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
<p>Content </p>
</div>
</div>
</div>
</div>
</body>
html, body, .content, .main, .2-col {
width: 100%;
height: 100%;
}
.content {
background: #a1a1a1;
}
.main {
background: #666;
}
.left {
height: 100%;
background: #333;
box-sizing: border-box;
}
.right {
height: 100%;
background: #ccc;
box-sizing: border-box;
}
p {
color: #fff;
}
https://jsfiddle.net/x63qtvsh/4/
Thanks
One solution is calculate the height of two columns left sidebar and your right content after DOM ready.
And then dynamically set the the height of both the columns to maximum height.
Thanks,
You can try this:
function sidebarHeight(){
var tallest = $('.right').height();
$('.left').height(tallest);
}
sidebarHeight();
$(window).on("resize", function(){
sidebarHeight();
});
Example: https://jsfiddle.net/x63qtvsh/9/
Note: You will need the jQuery library for this.
Related
I have the following HTML codes with CSS to display 3 columns with the same width.
But when displaying <h3>, the topics does not display in the same positions. How can I display them with same positions?
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 100px;
}
.column2 {
float: left;
width: 33.33%;
padding: auto;
height: 800px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="column" style="background-color:#ddd;">
<h2>Size & Weight</h2>
</div>
<div class="column" style="background-color:#ddd;">
<h3>Weight </h3>
<p>Approx. 255g</p>
</div>
<div class="column" style="background-color:#ccc;">
</div>
</div>
<div class="row">
<div class="column2" style="background-color:#ddd;">
<h2>General Features</h2>
<!-- <p>Some text..</p> -->
</div>
<div class="column2" style="background-color:#ddd;">
<h3>Volume Control </h3>
<p>Touch Sensor</p>
<h3>Impedance (Ohm) </h3>
<p>47 ohm (1kHz) (when connecting via the headphone cable with the unit turned on) , 16 ohm (1kHz) (when connecting via the headphone cable with the unit turned off)</p>
</div>
<div class="column2" style="background-color:#ccc;">
<h3>Passive Operation</h3>
<p>Yes</p>
<h3>Frequency Response (Active Operation)</h3>
<p>4Hz-40,000Hz</p>
</div>
</div>
I added padding:10px to the ".column2" and everything is looking in the same position,
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 100px;
}
.column2 {
float: left;
width: 33.33%;
padding: 10px;
height: 800px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="column" style="background-color:#ddd;">
<h2>Size & Weight</h2>
</div>
<div class="column" style="background-color:#ddd;">
<h3>Weight </h3>
<p>Approx. 255g</p>
</div>
<div class="column" style="background-color:#ccc;">
</div>
</div>
<div class="row">
<div class="column2" style="background-color:#ddd;">
<h2>General Features</h2>
<!-- <p>Some text..</p> -->
</div>
<div class="column2" style="background-color:#ddd;">
<h3>Volume Control </h3>
<p>Touch Sensor</p>
<h3>Impedance (Ohm) </h3>
<p>47 ohm (1kHz) (when connecting via the headphone cable with the unit turned on) , 16 ohm (1kHz) (when connecting via the headphone cable with the unit turned off)</p>
</div>
<div class="column2" style="background-color:#ccc;">
<h3>Passive Operation</h3>
<p>Yes</p>
<h3>Frequency Response (Active Operation)</h3>
<p>4Hz-40,000Hz</p>
</div>
</div>
is in same position, but you need normalize the "height" of heading.
Try:
h2, h3 {
line-height: 30px;
}
I have the following
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
Text that<br>literally<br>spans<br>4 lines
</p>
</div>
</div>
</div>
and css
.box-cell
{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up?
Searching didn't yield me which property I can manipulate to get same height :(
Here is jsfiddle
However in this fiddle I can not get them to be side by side to prove my point
EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.
I tried replicating what it sounds like you are looking for.
I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.
<div class="myc">
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
</div>
And for the CSS
.myc {
display: flex;
}
.col {
background-color: yellow;
margin-right: 20px;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-4" style="background-color: green">
some content
</div>
<div class="col-xs-6 col-sm-4" style="background-color: orange">
some content
<img src="http://placehold.it/100x120">
</div>
<div class="col-xs-6 col-sm-4" style="background-color: magenta">
some of content
</div>
</div>
Some options to solve it:
Different Tricks on How to Make Bootstrap Columns All the Same Height
<style type="text/css">
.box-cell{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
</style>
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
<span>Text that</span>
<span>literally</span>
<span>s4 lines</span>
<span>ygthfg</span>
</p>
</div>
</div>
</div>
1- you need to add text in span tag.
2- Or take text in one line .
seem to be stuck on what should be a trivial task. I have a section element like so
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
What I have done is made this section the height of the viewport by doing
#about {
background: #cccccc;
min-height: 100vh;
}
Now within this section I have two rows. The first row should display at the top, so nothing I really need to do with this. The second row I need to display at the bottom of the section. To do this, I would have thought I would need to give the container a 100% height first, but this does not seem to change its height. The only way I can get the container 100% is by using 100vh again, but seeing its a child of the section, why wouldnt 100% work?
Even when I do get it 100% using 100vh, I cant seem to get the row at the bottom of the container. How would I go about doing this?
I have set up an example JSFiddle
Thanks
You can use display:flex for this. From what i understood you want one of the rows to be display on the top of the section and other on the bottom
Div to have 100% height and width body should also need to have 100% width and height ,instead you can set 100vh height on about section and 100vh height on container
here is the snippet
#about {
background: #cccccc;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.row {
display: flex;
border: 1px solid green;
}
.col {
margin-left: 15px;
}
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
Hope this helps
You can adjust the position of the "alignBottom" row setting the correct "margin-top" at document ready:
The position of this row is: total height of the section minus the height of the row.
The snippet:
$('.alignBottom').css('margin-top', $('#about').height() - $('.alignBottom').height());
html, body {
height:100%;
}
#about {
background: #cccccc;
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
Basically, I have two columns, each with row divs of different height (dynamic content). on the right column, the bottom div has a scrollable set of content. What I want to do is to be able to make the scrollable div have a max-height such that its bottom lines up with the end of the divs in the first column.
The biggest difference I see between my question and How do I keep two divs that are side by side the same height? is that my 2 divs do not start at the same point (and I don't want to use flexbox due to compatibility issues with IE)
VERY simple plunkr: http://plnkr.co/edit/P1yvJon24xOeb3B9as3P?p=preview
HTML
<div class="row">
<div class="col-md-8">
<div class="row row1">randomly heighted content</div>
<div class="row row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-md-4">
<div class="row row3">
<p>random content</p>
</div>
<div class="row row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
</div>
</div>
</div>
</div>
</div>
(in the plunkr I want the item1....item6 to line up with the bottom of the red div)
CSS
.row1 {
background-color: yellow;
}
.row2 {
background-color: red;
}
.row3 {
background-color: blue;
}
.row4 {
background-color: green;
}
.scroll {
overflow-y: scroll;
max-height: 100px;
}
Things I've tried:
1) Setting fixed heights for each div. This doesn't work because I need the height to change with the content for the other divs. In addition, the inner content isn't responding to fixed heights.
2) I don't think I want to use tables because a) I have heard it is very bad style b) It doesn't matter/really shouldn't be the case that row1 and row3 are the same height
3) Flexbox is a problem because it works very poorly in tandem with percentages padding. And the top left div is a video with the 0 height padding-bottom trick to make it preload the space properly. So one option would be to find a way around the padding-bottom trick and then use flex box.
4) The weird padding: 100000px; margin: -1000000px; trick didn't work when I tried it, however I could simply be missing an additional step
I don't think this is possible using only HTML/CSS, because the height of a particular div needs to be dynamically determined that relies on another div that isn't its parent or child.
Therefore I was able to solve it using JavaScript:
http://liveweave.com/3014aD
Here are the files should Liveweave ever go down.
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css"> <!-- Put your style.css below bootstrap, so that your custom css overrides it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- jQuery -->
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-left col-md-8"> <!-- Added col-left class here -->
<div class="row1">
<p>randomly heighted content</p>
</div>
<div class="row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-right col-md-4"> <!-- Added col-right class here -->
<div class="row3">
<p>random content</p>
</div>
<div class="row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
<p>item7</p>
<p>item8</p>
<p>item9</p>
<p>item10</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.row1 {
overflow: auto;
background-color: yellow;
}
.row2 {
overflow: auto;
background-color: red;
}
.row3 {
overflow: auto;
background-color: blue;
}
.row4 {
overflow: auto;
background-color: green;
}
.scroll {
overflow-y: scroll;
}
.col-left {
padding-right: 0px !important;
}
.col-right {
padding-left: 0px !important;
}
script.js
function SetHeight() {
var left = $(".col-left").css("height");
var right = $(".row3").css("height");
var result = parseInt(left) - parseInt(right);
$(".scroll").css("height", result);
}
$(window).resize(function() {
SetHeight();
});
SetHeight(); // Call once to start off with
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>