When it comes to creating a responsive site with the given layouts:
If you have a fixed header (4rem), how can you set up the main container (C & D) to have a maximum height of 100% and scroll independently based on the overall height of the contents in C or D?
To see my current progress, check out this demo:
A simple concept is to
The structure would appear as follows:
<header>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3">A</div>
<div class="col-sm-9">B</div>
</div>
</div>
</header>
<main>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3 h-100 overflow-auto">C</div>
<div class="col-sm-9 h-100 overflow-auto">D</div>
</div>
</div>
</main>
To specify the height of the outermost element, I use styles such as:
$header-height: 4rem;
header {
height: $header-height;
}
main {
height: calc(100vh - #{$header-height});
}
In this case, the header is set to 4rem and main is set to 100% viewport height minus 4rem.
I then utilize Bootstrap's predefined class .h-100 in various places to ensure the inner elements occupy 100% height.
Lastly, set auto overflow on C and D. This is achieved by using Bootstrap's built-in class .overflow-auto.
Have you ever considered including the following CSS code?
.main-section {
width: 80vw;
overflow: hidden;
}
.sidebar-container, .content-container {
height: 90vh;
overflow-y: scroll;
}
Do you find this information useful?
// Bringing in the style sheets
import "./style.css";
// Some JavaScript code goes here!.header {
width: 100%;
}
.container-fluid {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.h-4r {
height: 4rem;
}
.h-100 {
height: 100%;
}
...
<div id="app">
</div>
... (omitted for brevity) ...feel free to simply copy and paste both sets of code into your stackblitz.com project (the one where I also conducted my tests) and let me know if it meets your requirements
here is the CSS:
html, body {
height:100%;
}
.header {
width: 100%;
}
.container-fluid {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.h-4r {
height: 4rem;
}
.h-100 {
height: 100%;
}
.menu-header {
flex: 0 1 auto;
}
.menu-header-name {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
text-align: center;
}
.menu-header-title {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
text-align: center;
}
.main-view {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
.sidebar {
height: 110%;
background-color: rgba(0, 0, 0, 0.25);
}
.main-content {
background-color: rgba(0, 0, 0, 0.25);
height: 110%;
}
.sidebar-wrapper,
.main-content-wrapper {
flex: 1 1 auto;
overflow-y: scroll;
padding-top:15px;
padding-bottom:15px;
}
and here is the HTML:
<div id="app">
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f34333432213000746e756e73">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<div class="container-fluid">
<div class="row menu-header">
<div class="d-flex col-3 h-4r align-items-center justify-content-center" style="background-color: #FF6D6E">
<div class="menu-header-name">A</div>
</div>
<div class="d-flex col-9 h-4r align-items-center justify-content-center" style="background-color: #8F8EEC">
<div class="menu-header-title">B</div>
</div>
</div>
<div class="row main-view">
<div class="col-3 sidebar-wrapper" style="background-color: #7EE987">
<div class="sidebar">C</div>
</div>
<div class="col-9 main-content-wrapper" style="background-color: #FDCE72">
<div class="main-content">D</div>
</div>
</div>
</div>
Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...
Basically, the issue is that the url for an image in jquery-ui.css file does not resolve once the site is deployed. The website is deployed under the default web site in IIS7, causing the browser console to look for the image in a different location than e ...
Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader." Across all major browsers, the functionality works smoothly as intended - when all ...
Can text automatically resize as the browser size decreases for liquid-based design using percentages? While images and divs can rescale, text scaling in percentages seems impossible! When set in percentages, it only changes the unified em setting for tha ...
I'm looking to create a hover effect on an element within a fullscreen div. When I hover over the element, I want a background image to fade in on the div with the class ".section." While I can easily display the background image, I am unsure of how t ...
Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...
When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...
I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...
There is a text field that triggers a JavaScript function when a key is pressed. <input type="text" class="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> The function takes the input from the text field and searches for a result in t ...
My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...
I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...
Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...
At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...
I am encountering an issue while retrieving text from a database. The data is stored as "♦" in the database without any problems. However, when I retrieve the record from the database, it appears on the page as a regular question mark instead of the bla ...
I'm currently working on a website (saulesinterjerai.lt) and everything seems to be functioning properly, except for the fact that on mobile devices, the links aren't clickable and instead navigates to other layers. How can I disable this behavio ...
I have a unique set of spans to work with: <span> <span>foobar</span> <span>textexampleone</span> </span> Currently, I am attempting to utilize xpath in order to locate the span containing "textexampleone" with ...
I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...
Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...
I have set up a CSS element to insert some content. Here's the code: .foo:after { content: "Bold, italics"; } What I want is for the word "Bold" to appear in bold font-weight and the word "italics" to appear in an italic font-style. I know that ad ...
I am currently working on populating an array with objects retrieved from an API. The objects are being fetched successfully, but I am facing issues when trying to display them using v-for in the array. Below are my data variables: data() { return { ...