0

I have a Bootstrap page that looks like this:

<nav> ... </nav> <!-- height not fixed --> <div class="container-fluid eye-catcher"> <div class="row"> <div class="col-sm-8"> ... </div> <div class="col-sm-4 image"> ... </div> </div> </div>

In the end, it should look like this: enter image description here

The code for the image I have is this, which works fine...

.image { background-image: url("image.png"); background-size: contain; background-position: center top; background-repeat: no-repeat; height: 100%; }

...but how can I let the row filling up (only) the remaining space (no scrollbar should be visible then)

Improve this question
3
  • add CSS overflow: hidden to the element which size shouldn't be disrespected. Even if it is body Commented Jun 3, 2016 at 13:37
  • @warkentien2 that's something I'd really like to avoid. Commented Jun 3, 2016 at 13:38
  • So you will want that the row have the same height as the background image? Commented Jun 3, 2016 at 13:40

2 Answers 2

Reset to default
1

You can add some Flexbox with media queries. Full code HERE

.content { display: flex; flex-direction: column; height: 100vh; } nav { padding: 10px; border: 1px solid black; } .image { background: lightblue; } .left { background: lightgreen; } @media(min-width: 768px) { .eye-catcher { flex: 1; border: 1px solid black; display: flex; width: 100%; } .flex-row { display: flex; flex: 1; } }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

So basically you want to have the two columns the same height? this requires javascript or you can use display: table-cell to manage this, look it up. Via javascript it is by using match-height plugin or by creating a little custom script: http://stack/setting-equal-heights-for-divs-with-jquery

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.