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: hiddenat column origin li> - add
margin-down: -5000px; Working in the padding-down: 5000pxexample ( I
-xsinstead of-smExample 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