Is it possible to have two <div> containers, one with a fixed height and the second one below being dynamic in size to fill up the rest of the viewport?
If there is overflow inside the dynamic container, scrollbars should appear within that container instead of on the viewport itself.
Do you have any ideas on how to achieve this? Would it involve a lot of scripting or can it be done purely through CSS?
This is how I would tackle the problem: http://jsfiddle.net/tw16/X5rWb/
CSS:
.content{
border: 1px solid red;
overflow-y: auto; /* scrollbars will only show when necessary */
overflow-x: hidden;
}
jQuery:
$(function () {
adjustHeight();
});
$(window).resize(function () {
adjustHeight();
});
function adjustHeight() {
var windowHeight = $(window).height() - 2;
var headerHeight = $('.header').outerHeight();
$('.content').height(windowHeight - headerHeight);
}
The number 2 in windowHeight accounts for the combined top and bottom borders of the .content div.
By using outerHeight() for the .header, there's no need for additional adjustments as the padding and borders are already included. Using outerHeight(true) would also factor in the top and bottom margins.
http://jsfiddle.net/abc123/45/
.main-content{
position:absolute;
top: 150px;
bottom: 20px;
left: 15px;
right: 15px;
height: auto;
outline: 1px solid blue;
overflow-y: scroll;
overflow-x: hidden;
}
.top-header{
height:180px;
outline: 1px solid orange;
}
To ensure your header remains fixed, consider adjusting the container's height using JavaScript.
var windowHeight = $(window).height();
$('.content').height(windowHeight - $('.header').height())
Keep in mind that this method does not take into account padding or margins. It is advisable to trigger this function whenever the browser window is resized.
$(window).resize(function() {
doResize();
});
function doResize(){
var windowHeight = $(window).height();
$('.content').height(windowHeight - $('.header').height())
}
In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...
I am facing a frustrating issue with my WordPress website as changes made in my .CSS file do not seem to reflect in Chrome, Firefox or Edge browsers. The CSS is loaded directly from the <link href="/wp-content/themes/mytheme/css/style.css" type="text/c ...
I have a fully functional website, but I am encountering an error specifically when calling an ajax page from PHP. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>403 Forbidden</title> </head>< ...
I want to change the way the suggested autocompletions are displayed by placing them in a separate div instead of showing them as a pop-up menu over the autocomplete widget. This decision was made because we are using autocomplete to alert users about pote ...
I'm struggling with formatting a text in HTML, here's the situation: <div>"Book name is:Testbook"</div> What I want to achieve is to display "Testbook" on a new line like this: Book name is: Testbook Unfortunately, I' ...
Experimenting with implementing a Bootstrap navbar in a Vue js project that was set up using the command "vue create sitoprova". The following libraries were imported: dependencies": { "bootstrap": "^4.4.1", "bootstrap-vue": "^2.13.0", "core-js ...
On my page at , there are links on the right side that I am unable to click. Does anyone know why this might be happening? Content on the Left Side: <nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendije ...
I've come across a lot of information on creating and sending XML files with Ajax, but I'm feeling pretty confused. My goal is to generate an XML file and send it to the server using Ajax. In return, I expect to receive another XML file. Below ...
I am encountering an issue where I am trying to save an AJAX response to the Post PHP variable and display it on the same page. However, I keep getting a "Notice: Undefined index" error. I believe the problem lies in the success part of the AJAX call. Can ...
I recently delved into the world of Foundation by Zurb and I must say, it has exceeded my expectations. The website building process has become incredibly fast and efficient with this framework. I have already mastered creating rows with customized columns ...
I'm having trouble extracting a specific src attribute const img1 = selector .find("li.gallery_thumbItem.s-gallery_thumbItem:nth-child(3) span.gallery_thumbIn> img:last-child") .attr("src"); The webpage contains: https://i.sstatic.net/zeBPG ...
I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...
Having some trouble with the autoNumeric jQuery plugin for formatting USD input. I keep getting an 'Uncaught SyntaxError: Unexpected token export' error on line 5450 when using the latest version of Chrome on Linux. I made sure to call it after ...
By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...
When I click on the 'create new button', a modal window form pops up with a dropdown menu. The dropdown is supposed to be populated via ajax with the help of the populateUserData() function. Even though the ajax call seems to be successful, I am ...
Is there a built-in way (possibly in one of the frameworks) to determine if a form has been modified from its initial values? The onchange event is not sufficient, as it triggers even if no real change has occurred (such as toggling a checkbox on and off ...
As I work on optimizing my website, I find myself juggling multiple plugins that include jQuery plugins with CSS along with my own JavaScript code. Currently, the CSS is spread across separate files for each plugin I have downloaded. When needed on a page ...
Beginner in programming. I'm having trouble with my signature design. The block in the background is sticking out on both sides. How can I adjust its size? <td> <a href="https://twitter.com/TEST" color="#252e42" class="sc-hzDkRC kpsoy ...
This is my amazing service providing up-to-date information at your fingertips! fetchCurrentAffairs() : Observable<NewsData[]> { return this.httpClient.get<NewsData[]>(`${this.url}/latest`); } Introducing the brilliant component to brin ...
The shopping cart in Bootstrap 3 utilizes standard Bootstrap markup as shown below: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div id ...