css - Keep columns with same height -
I try to keep two columns with the same height using the display: table
I am here. What did I do:
.col-sm-12 on one side. Silent Content
and CSS
. Col-sm-12 {display: table; Height: 100%; } Separate {display: table-cell; Height: 100%; Width: 25%; Background: green; }. Main-content {display: table-cell; Height: 100%; Width: 75%; }
worked fine but when I added content on one side, the content goes down
First of all, you should use the bootstrap grid instead of percents in width.
That said, to get two floating (and dynamic) columns for the same height, you can use this trick:
- set
Overflow: hidden
at column origin li> - add
margin-down: -5000px; Working in the padding-down: 5000px
example ( I
-xs
instead of-sm
Example only ):. Wrapper {overflow: hidden; } On one side (background: Forrestgreen; padding-bottom: 5000px; margin-bottom: -5000px;}. Main-content {background: tomatoes; padding-down: 5000px; margin-bottom: -5000px;}
& lt; link href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.0/ CSS / bootstrap .min.css "rel =" stylesheet "/> gt; div class =" col-xs-12 "& gt; div class =" row wrapper "> gt; different class =" Colon-xs-3 "& gt; From one side & lt; br & gt; From one side & lt; br & gt; From one side to & lt; br & gt; One By & lt; br & gt; A By & lt; br & gt; From one side & lt; br & gt; From one side & lt; br & gt; & lt; / side & gt; & lt; ; Main category & lt; br & Br>
Content
Comments
Post a Comment