How can I have a column longer than one in the same row?

Navigation
1

I'm doing it with bootstrap, let's say the header (the first div above) I have no prrblemas. First of all say that the celestial as you well know are the rows and the green columns, I have two rows:

First row : row with two columns Second row : row with two columns, but I want the right column to remain quiet so that it does not continue to grow down because of the content of the title of the section and description.

Then my problem is that the menu stays small, only that its height is enough to open its content, not necessarily fit its brother, because the result is that as the one on the left has more content this menu is unnecessarily extended, I do not know if I have explained myself well.

In defninitiva, do not authorize but keep the responsive.

I do not know if to fix it I should use properties from CSS .

    
asked by josanangel 07.07.2018 в 17:02
source

2 answers

0

Here several options:

  • the normal both columns grow
  • the column you put maximum height 50vh
  • the column grows the same but the bottom lies
  • the column grows to the maximum content (max: fit-content) 

.row {
  background: cyan;
  padding: 5px;
}

.row>div {
  background: green;
  border: 5px solid cyan;
}

.row>div.sinfondo {
  background: cyan;
}

ul {
  background: lightgreen;
}

.row>div.mediaaltura {
  max-height: 50vh;
}
.row>div.fitcontent {
  max-height: fit-content;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 text-center">
        <h1>Titulo</h1>
      </div>
      <div class="col-md-4 text-center">
        <p>Foto</p>
        <img src="https://picsum.photos/100/280/?random" alt="test">
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <h2>Titulo del apartado 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in mattis magna, ac viverra ipsum. Nulla dictum hendrerit vehicula. Nunc semper mi in auctor aliquam. Donec ut magna sit amet sapien faucibus scelerisque a quis risus. Nam convallis
          eu nisl a accumsan. Praesent facilisis vitae justo a faucibus. Donec nibh lacus, feugiat non ligula sit amet, venenatis ornare diam. Cras diam lorem, placerat vel leo vitae, accumsan dictum velit. Sed tincidunt fermentum nibh, nec pretium lorem
          sagittis non. Curabitur in ullamcorper tellus. Nulla interdum consectetur justo, vel venenatis eros laoreet vel. Etiam condimentum est sapien, ut pellentesque ligula consequat nec. Cras in vestibulum ipsum. Morbi iaculis, neque quis finibus
          tristique, eros felis molestie ante, a consectetur nibh est eu ex. Aenean magna quam, iaculis eu imperdiet lacinia, semper a velit. Vivamus commodo leo vel finibus ornare. Integer ac tincidunt lorem. Nunc id lacus id nisl finibus vulputate et
          et eros.

        </p>
      </div>
      <div class="col-md-4 mediaaltura">
        <ul class="text-menu">
          <li>TITULO 1 1</li>
          <li>TITULO 2 1</li>
          <li>TITULO 3 1</li>
          <li>TITULO 4 1</li>
        </ul>
      </div>
    </div>


    <div class="row">
      <div class="col-md-8">
        <h2>Titulo del apartado 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in mattis magna, ac viverra ipsum. Nulla dictum hendrerit vehicula. Nunc semper mi in auctor aliquam. Donec ut magna sit amet sapien faucibus scelerisque a quis risus. Nam convallis
          eu nisl a accumsan. Praesent facilisis vitae justo a faucibus. Donec nibh lacus, feugiat non ligula sit amet, venenatis ornare diam. Cras diam lorem, placerat vel leo vitae, accumsan dictum velit. Sed tincidunt fermentum nibh, nec pretium lorem
          sagittis non. Curabitur in ullamcorper tellus. Nulla interdum consectetur justo, vel venenatis eros laoreet vel. Etiam condimentum est sapien, ut pellentesque ligula consequat nec. Cras in vestibulum ipsum. Morbi iaculis, neque quis finibus
          tristique, eros felis molestie ante, a consectetur nibh est eu ex. Aenean magna quam, iaculis eu imperdiet lacinia, semper a velit. Vivamus commodo leo vel finibus ornare. Integer ac tincidunt lorem. Nunc id lacus id nisl finibus vulputate et
          et eros.

        </p>
      </div>
      <div class="col-md-4 sinfondo">
        <ul class="text-menu">
          <li>TITULO 1 2</li>
          <li>TITULO 2 2</li>
          <li>TITULO 3 2</li>
          <li>TITULO 4 2</li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8">
        <h2>Titulo del apartado 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in mattis magna, ac viverra ipsum. Nulla dictum hendrerit vehicula. Nunc semper mi in auctor aliquam. Donec ut magna sit amet sapien faucibus scelerisque a quis risus. Nam convallis
          eu nisl a accumsan. Praesent facilisis vitae justo a faucibus. Donec nibh lacus, feugiat non ligula sit amet, venenatis ornare diam. Cras diam lorem, placerat vel leo vitae, accumsan dictum velit. Sed tincidunt fermentum nibh, nec pretium lorem
          sagittis non. Curabitur in ullamcorper tellus. Nulla interdum consectetur justo, vel venenatis eros laoreet vel. Etiam condimentum est sapien, ut pellentesque ligula consequat nec. Cras in vestibulum ipsum. Morbi iaculis, neque quis finibus
          tristique, eros felis molestie ante, a consectetur nibh est eu ex. Aenean magna quam, iaculis eu imperdiet lacinia, semper a velit. Vivamus commodo leo vel finibus ornare. Integer ac tincidunt lorem. Nunc id lacus id nisl finibus vulputate et
          et eros.

        </p>
      </div>
      <div class="col-md-4 fitcontent">
        <ul class="text-menu">
          <li>TITULO 1 3</li>
          <li>TITULO 2 3</li>
          <li>TITULO 3 3</li>
          <li>TITULO 4 3</li>
        </ul>
      </div>
    </div>

</div>
</body>

In Internet Explorer the one to lie the bottom is the only one that responds well.

In Firefox and Edge that support the max: fit-content they seem not to respect it.

    
answered by 07.07.2018 в 22:26
-1

Have you tried applying this in css? 

menu{
  max-height: ()vh;
}
    
answered by 07.07.2018 в 17:32
How to add itext library to Java? How to print a string in a textview letter by letter in java?