Creating fixed and scrollable columns using either Flexbox or Bootstrap

I'm currently facing an issue with creating a responsive webpage layout. My goal is to have a fixed left column that consists of an image taking up 66% of the page, with the remaining 33% dedicated to scrollable content on the right side. To achieve this, I've decided to use col-sm-8 and col-sm-4 classes.

I've experimented with various approaches to make it work, but the closest I've come is encountering a scenario where the content on the right overflows and creates blank space below the image.

Below is my current code snippet:

<div class="container-fluid" style="padding: 0; margin-right: auto; margin-left: 0px;">
    <div class="row" style="margin-bottom: 20px; margin-left: 0px; margin-right: auto;">
        <div class="col-lg-8">
            <div class="img-holder">                                 
                    <div class="box-wrapper"></div>
            </div>
        </div>
        <div class="col-lg-4">
            <h1>Some Content</h1>
        </div>
    </div>  
</div>

CSS:

.img-holder {
    padding: 0;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    z-index:-1;
}

.box-wrapper{
background-image: url(~/img/example.jpg);
    background-size: cover;
    background-position: 47.5% 42.675%;
    background-repeat: no-repeat;
    padding-bottom: 100%;
}

I'm aiming for a fluid design that allows the content to stack below the photo when viewed on smaller devices like mobile or tablet screens.

Answer №1

To achieve a fullscreen effect for all div elements, set the height to 100% of the page and add overflow:auto to the columns.

Check out the code snippet below:

.img-holder {
  padding: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.box-wrapper {
  background-image: url(https://www.example.com/image.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.wrapper {
  height: 100vh;
  margin: 0;
}

.wrapper div {
  height: 100%;
  margin: 0;
  max-height: 100%;
  overflow:auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid wrapper" style="padding: 0; margin-right: auto; margin-left: 0;">
  <div class="row">
    <div class="col-lg-8">
      <div class="img-holder">
        <div class="box-wrapper"></div>
      </div>
    </div>
    <div class="col-lg-4">
      <h1>Some Content</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit... (Content truncated for brevity) ... quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding Information to a Material Design Card

Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...

Enhance Your Website with Dynamic Autocomplete Using AJAX

I am attempting to populate the bootstrap autocomplete(Typeahead) list with data from an external Web-service called "Wunderground Weather", but it is not functioning correctly. An error message mentioning "hasOwnProperty" is being displayed. <link re ...

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

Looking for a particular table element using Selenium Webdriver in Java: A Guide

After locating a table element using this: WebElement tableElement = selectorboxelement.findElement(By.xpath("//ancestor::table")); I identified the `selectorboxelement` as a web element with this line of code: WebElement selectorboxelement = driver.fin ...

HTML Tooltip with Bootstrap 4

After creating a website using Bootstrap 4 and jQuery, I encountered an issue with HTML-styled tooltips. Instead of displaying the tooltips with the correct styling, they appear to be populated using the jQuery text() function, showing the HTML as plain te ...

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

Access the HTML file through the Heroku Bash terminal

After deploying my Flask python application on Heroku, I encountered an issue with one line of my python code where I need to open an HTML file for some javascript to execute. While it works fine locally on my Mac, Heroku seems to have trouble recognizing ...

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

<div class="row"> <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i"> <!-- small box --> <div class="small-box bg-dashboard-box" > <div class="inner"> <div class="text-black"> ...

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

Getting the text from a Selenium element can become tricky when dealing with product discounts that alter the element

(Programming) I am working on selecting random products from a website, some with discounts and some without. For instance: How do I retrieve product 748 (without discount)? or How do I retrieve product 419 (with discount)? When the product ha ...

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

Can BeautifulSoup be utilized to retrieve CSS from a webpage?

Currently, I am tackling a project that necessitates the full view of a webpage instead of just scattered lines entwined with images in HTML format. Is there a method to parse CSS alongside HTML using BeautifulSoup? Below is an excerpt from my code: from ...

Illuminated Box with Text Beneath Image Overlay

Is there a way to customize the text displayed under each zoomed-in image even further, using images, etc. instead of just relying on the alt text? An ideal solution would involve displaying the text in a div. You can find the codepen here: // Looking ...

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...

jQuery Ajax Redirect Form

I am currently developing an HTML application with a form. Upon clicking the submit button, I initiate a server-side call using jquery.ajax(). However, when the server returns an exception, such as a Status Code 500, I need to display an error message on t ...

Tips for maintaining the aspect ratio of an image while ensuring it always occupies 100% width and automatically adjusts its height

I've searched everywhere but can't seem to find the right CSS solution for my problem. How can I ensure that an image always fills 100% of the height and width of the screen while maintaining its aspect ratio? .myimage { object-fit: cover; widt ...

Adding a Click class can cause significant disruption to the entire CSS layout

I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...