When it comes to creating a responsive site with the given layouts:
https://i.sstatic.net/esdpU.png
https://i.sstatic.net/5Rdlr.png
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.
https://i.sstatic.net/cwibA.png
https://i.sstatic.net/3Lpdp.png
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>
Here is a code snippet that mixes VBScript and HTML: IF (x.name="name") THEN n=x.value response.write("<tr>") response.write("<th>Name:</th>") response.write("<td><input name=""n2"" value=" & n & ">< ...
Is there a way to convert the vertical table generated by the following code into a horizontal one with stylish formatting? Additionally, is it possible to display certain columns in a popup window based on query parameters using jQuery or CSS? <html&g ...
Issue: Menu background doesn't align with header. (visible in the image provided below) VIEW IMAGE Any suggestions on how to resolve this alignment problem? CSS CODE : .header { margin:0px auto; max-width: 960px; } #header { height:30 ...
My navigation menu button is not functioning correctly. I am currently working on this project using CodePen, so Bootstrap is already integrated into the code. <div class="navbar-header"> <button type="button" class="btn navbar-toggl ...
Imagine you have a page named a.html which contains all the jQuery code, and another page called b.html that only includes HTML tags. Is it feasible to achieve something like this: alert( $('a').fromhref('b.html').html() ); In essence ...
As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...
Currently, my website has a login form that updates the page with user data through AJAX after successful login. To maintain semantic integrity, I use JavaScript to remove the login form from the page once the user is logged in. However, when the user lo ...
I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...
Hey there, I'm completely new to Codeigniter. In the Controllers folder, I've created a file called caller.php and in the \Views directory, I've created a file named home1.php. Additionally, within the root directory, I've made an ...
Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...
Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...
Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? " " : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...
Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...
Here is a simple code snippet: <div class="delem"><label class="required" for="last_name">Full Name :</label><input id="fullname" type="text" name="fullname" value="" class="fullsize" required=""></div> <div class="delem" ...
When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...
My main goal with the checkbox click event is to achieve the following objectives: 1] Create a button with the id = 'id-of-checkbox'+'some-character-here' in a specific div. 2] Clicking on that button will remove both the button and ...
Having an issue with the django 4.0.4 framework, I am seeing the error message "Reverse for 'upload' not found. 'upload' is not a valid view function or pattern name". The strange thing is that it was working fine earlier today, and I&a ...
Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...
The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ. My goal is to highli ...
Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...