Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden.

.left-bg{
background-color:red; 
  position:fixed;
  width:50%;
  height:100%;
  
}
.left-content{
color:#fff; 

}
<div class="left-bg">
  <div class="left-content">
    bla bla bla
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    </div>
</div>

javascriptcsshtml

Answer №1

To implement a flexible layout, use flexbox and divide your content into 2 separate divs:

<div class="left-bg">
  <div class="left-content-top">
    Insert your text here
  </div>
  <div class="left-content-bottom">
    More text goes here
  </div>
</div>

Apply the flexbox styling with space between elements:

.left-bg{
background-color:red; 
  position:fixed;
  width:50%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
}
.left-content{
color:#fff; 
}

Flexbox provides an efficient way to create responsive layouts. Check out the demo on CodePen: http://codepen.io/anon/pen/vNKQLW?editors=110

Does this solution meet your requirements?

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

Mastering the art of integrating HTML5's localstorage feature with Jquery's select2 plugin

Is it possible to integrate HTML5's localstorage method with Jquery's select2 plugin? Currently, all entered data disappears when the browser/tab is closed, leading to potential confusion if you forget what was entered. Here is an example of my ...

javascriptjqueryhtmljquery-select2

Angularjs input type=number directive is malfunctioning

I have an input field with the type "number" that allows both whole and decimal numbers. However, I only want to allow whole numbers to be entered into the input. I have created a directive that works for input fields with type "text", but it does not work ...

htmlangularjsionic-framework

VueJS File Upload Field Failing to Reset Post Successful Submission

I am facing an issue in my VueJS application where the form does not clear all field values after submission, especially the file upload field. After a successful submission, the uploaded file name still remains displayed on the screen. Below is the code ...

javascriptphplaravelvue.js

Why won't NextJS Image elements render on iOS 16 when they are not in the viewport initially?

I opted to implement NextJS for enhanced routing capabilities and image optimization. However, I encountered an issue with certain images failing to load properly on iOS devices. The problem arises within a scrollable horizontal container featuring Product ...

javascriptimagenext.jssafarilazy-loading

Vue.js is experiencing issues with updating attributes within nested v-for loops

Exploring the realm of vue.js and react, I am currently in the process of adapting a basic editable HTML table example found in a React book to further my understanding of Vue. Here is a breakdown of what occurs within the code: User clicks on a td elem ...

javascriptvue.js

What is the best method for selecting only files (excluding folders) in Gulp?

I have a gulpfile where I am injecting files into an appcache manifest in this manner: var cachedFiles = gulp.src('**', {read: false, cwd: 'build'}); gulp.src('src/*.appcache', {base: 'src'}) .pipe($.inject(cachedF ...

javascriptgulpglob

Tips for successfully implementing an Ocrad.js example

I've been working on an OCR (optical character recognition) web application and stumbled upon the Ocrad.js JavaScript library Ocrad.js. It seems like a perfect fit for what I need, but unfortunately, I'm having trouble getting it to function prop ...

javascriptjqueryocr

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

In my web app, I have a bottom navigation bar with 9 buttons, each represented by a Sprite Image having 3 different states. The challenge I'm facing is aligning all the images at the bottom of the nav bar or div. The icons vary slightly in size, and ...

htmlcsscss-spritessprite

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

Causes for the display of the text within the alt attribute

Recently, I attempted to view an HTML page in text browsers and noticed that the alt attribute value of the img tag was visible. I decided to omit the alt attribute and instead utilized CSS: .headerImg:after, .headerImg::after { conte ...

htmlcssbrowseralt

Responsive screen sizing in Vue.js

https://i.stack.imgur.com/8qwpn.png I added a margin-left to my component due to it being blocked by the side-bar and the "Roles" table. Is there a way to shift my table to the right when the screen width is less than 992? I need it to be responsive acro ...

javascriptvue.jsresponsive-design

A tag that does not adhere to the background color's rgba opacity restrictions

Can you believe what's happening to me? Check out this code snippet. I'm trying to apply an rgba color to my a tag, but it's acting like an rgb color instead of the intended rgba. The text background is solid, but the rest of the background ...

cssbackground-coloropacity

Is there a way in Rollup.js to substitute a dependency package's imported module with a local file?

I am currently working on a JavaScript project that needs to be bundled using Rollup.js. The project depends on package A, which in turn relies on package B: "mypackage" ---import--> "A" ----import----> "B" My package ...

javascriptnpmbundlerolluprollupjs

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

csshtmlimagereactjsposition

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

javascriptnode.jsexpressnpmprogressive-web-apps

Modal shows full JSON information instead of just a single item

This is a sample of my JSON data. I am looking to showcase the content of the clicked element in a modal window. [{ "id": 1, "companyName": "test", "image": "https://mmelektronik.com.pl/w ...

javascriptvue.jsvuejs2vue-componentv-for

Dealing with Errors in Express 4

After reviewing several posts, I am still confused about how to handle errors. Here is a snippet of my middleware: // catch 404 and forward to error handler app.use(function (req, res, next) { var err = new Error('Not Found'); err.status ...

javascriptnode.jsexpresserror-handling

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

JS implementing a listener to modify a Google Map from a separate class

Currently, I am in the process of migrating my Google Map functionality from ionic-native to JavaScript. I am facing an issue while attempting to modify the click listener of my map from a separate class. The problem seems to be related to property errors. ...

javascriptangulartypescriptionic2

Access a designated tab using cbpFWTabs

I am currently using the cbpFWTabs plugin from Tympanus for my tabs (http://tympanus.net/Development/TabStylesInspiration/). However, I am struggling to open a specific tab upon page load. I have attempted to create a show method within the page script, bu ...

javascriptjqueryhtmltabs