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

The @Input decorator in Angular 2/4 is designed to only transfer fundamental values and not collections or complex data

I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...

javascripthtmlangularinput

Problem with OnClick function in Firefox

I have implemented the following code in an external JavaScript file: $( document ).ready(function() { var elem='<img class="imgload" src="/common/images/spinLoader/transperent.png">'; $('.imgchange').append(elem); }); $(func ...

javascriptjqueryfirefox

Property that is dynamically populated based on data retrieved from an external API

My template relies on an API call (Firebase) to determine the return value of my computed property, which in turn decides whether certain elements are displayed. However, I've noticed that my computed property is not reactive - its value in the templ ...

javascriptvue.jscomputed-properties

What is the process for converting a string literal into raw JSON and then storing it?

When trying to edit object values using a text input element and JSON.stringify(txt, null, 2), everything seems fine initially. However, after submitting the input, I end up with unwanted characters like "/n" and "\" within the string literal. Despite ...

javascriptjsonstringvue.js

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Recently, I started exploring JQuery and decided to experiment with asynchronous multipart form uploading. The form includes various data fields along with a file type. On the server side (using Spring), I have set up the code as follows: @RequestMapping ...

javascriptjqueryajaxspringrest

Basic animation created using Three.js

I'm currently experimenting with a basic color animation in Three.js. Below is the code I am using: const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geomet ...

javascriptthree.js

Creating users or custom roles in MongoDB on a NodeJS server is not currently possible

I have been attempting to directly create users on my database through our Express server, utilizing MongoDB 3.4 for the backend. Below is the current code snippet from the server: const express = require('express'); const bodyParser = require(& ...

javascriptmongodbexpresscreateuser

jQuery functionality restricted to desktop devices

I am attempting to disable a jQuery function specifically for mobile devices. I found some instructions that seem helpful on this page. Unfortunately, following the instructions did not work for me. Here is the code snippet I have: var isMobile = /Androi ...

javascriptjquery

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

htmlcssbrowserhtml-table

How to Enhance Angular ui-router nested views with Resolve?

I have been working on creating a customized version of my Angular 1.4.12 application with nested views. The main purpose behind this customization is to accommodate sections within the app that require a header/content/footer structure, while others do no ...

javascripthtmlangularjsangular-ui-router

Showing the unique identifier instead of the actual data in HTML for a Firebase Object using Angularfire

Currently, I am utilizing AngularFire for a specific project. The structure of my firebase Object is as follows: { mainKey: { key1:value1, key2:value2 }, mainkey2: { key3:value3 } } The data has been inputted in a manner tha ...

javascriptangularjsfirebaseangularfire

How can I send a file and a string request using the POST method to a Spring REST controller that accepts byte[] and Strings with Angular

Need help with sending a post method that includes a file and another string request parameter to a spring rest controller using angular. The server controller parameter is set up to receive an array of bytes for the file and another string request wrappe ...

javascriptangularjsspringfilepost

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Let me begin by sharing some context: I am currently employed at a company where I have taken over the codebase. To better understand the issue, I decided to replicate it in a new nestjs project, which involves 4 entities (for demonstration purposes only). ...

javascriptnode.jstypescripttypeorm

Tips for styling links in Nuxt/Vue based on specific conditions

Struggling with conditional styling in my Nuxt app. I want to change the background color of the active link based on the current page. Using .nuxt-link-exact-active works for styling the active link, but how can I customize it for each page? The links ar ...

htmlcssvue.jsnuxt.js

Angular JS Introductory Module

Currently, I am encountering an issue in AngularJS 1.2.15 marked by $injector:modulerr. Interestingly, the application runs smoothly when hosted on a MAMP Apache server locally, but encounters errors when running on a node server, generating the error mess ...

javascriptnode.jsangularjs

What is the best way to retrieve web pages from the cache and automatically fill in form data when navigating to them from different pages on my website?

On my website, I have multiple pages featuring forms along with breadcrumbs navigation and main navigation. Interestingly enough, the main navigation and breadcrumbs share some similarities. However, my desire is that when users click on breadcrumb links, ...

javascriptjquerydomcachingbreadcrumbs

Why do variables maintain the same value across modules when using the require function in Node.js?

We have a scenario where we have multiple files in the same directory: data.js var anArray = [1,2]; module.exports = anArray; mod1.js var data = require('./data'); module.exports = data; mod2.js var data = require('./data'); modul ...

javascriptnode.jswebmodule

Transferring JSON data using $.post in Express/NodeJS

Below is the contents of my app.js file: var express = require('express'); var app = express(); var path = require('path'); var $ = require('jquery'); var nodemailer = require('nodemailer'); app.use('/static&a ...

javascriptjsonnode.jspostexpress

What is the best way to retrieve all records from a MongoDB collection?

I am currently delving into the realm of JavaScript and MongoDB while attempting to construct a basic blog engine. My goal is to retrieve all blog posts stored in MongoDB so that I can utilize this data to populate an EJS template. Although I successfully ...

javascriptmongodbmongoose