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

< / Div>

Comments

Popular posts from this blog

apache - 504 Gateway Time-out The server didn't respond in time. How to fix it? -

c# - .net WebSocket: CloseOutputAsync vs CloseAsync -

c++ - How to properly scale qgroupbox title with stylesheet for high resolution display? -