I'm facing difficulty in extending the left and right divs to the bottom of the page, with no additional space above or below.
You can view my progress here: http://jsfiddle.net/qggFz/26/
Appreciate any help, Dale
I'm facing difficulty in extending the left and right divs to the bottom of the page, with no additional space above or below.
You can view my progress here: http://jsfiddle.net/qggFz/26/
Appreciate any help, Dale
Behold, behold! Your majestic javascript solution:
//This is where you can embed your js code
$(document).ready(function(){
var remainingHeight = $('html').height() - $('#top').height();
$('#left').css('height', remainingHeight);
$('#right').css('height', remainingHeight);
});
CSS magic:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
Your precious HTML:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
Make sure to check out this demo: http://jsfiddle.net/9afHe/
It is essential to define the height of the main element.
For more information, visit: https://developer.mozilla.org/en/CSS/height
The height is calculated in relation to the size of the parent block. If the height of the parent block is not explicitly stated, the value will default to auto. A percentage height on the primary element (e.g. ) is relative to the viewport.
Ensuring that the body and html tags have a consistent style of 100% is crucial:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* for modern browsers */
height:100%; /* interpreted as min-height in IE6 */
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}
Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...
I have been experimenting with Bootstrap Trying to create a layout with an image aligned to the top right, a rotated paragraph with a star symbol, and a vertical arrangement of five star symbols. Here's a screenshot of what I'm aiming for: Scre ...
I'm currently working on creating a form that will allow me to store images into a PostgreSQL database. The database contains a single table with two fields: ID and IMG, which is of type bytea. The page has 2 tabs, and I have a function called 'o ...
Having two events, the second one initiates an Ajax call. When a click creates an input in the <td>, it gets replaced by the success event afterwards - ensuring that the input is correct upon blur. $(document).on("click","#"+table_id+" td",function( ...
Hello everyone, I am new to Node/Express and currently working on an application using Express. I have a button that I want to click in order to save my data into a MongoDB database. However, I do not want this request to be sent to a specific end-point. ...
I am encountering an error related to the router.post("/") function in my JavaScript, express, ejs, and MongoDB project. The main objective of this post request is to enable users to save a blog post, which will then redirect them to the main page ("/"). ...
When it comes to the layout below, my objective is to always keep the middle item centered within the container div. This means that the left and right items should be aligned to the far left and right of the container respectively. The current styling fo ...
After successfully implementing the Intersection Observer API on my website and incorporating a few transitions from an example I came across, everything seemed to be working smoothly. You can view the scale-in transition in action here: https://jsfiddle.n ...
<div ng-repeat="section in filterSections"> <h4>{{ section.title }}</h4> <div class="checkbox" ng-click="loaderStart()" ng-if="section.control == 'checkbox'" ng-repeat="option in section.options"> <label ...
I'm having trouble implementing Bootstrap 5 OffCanvas within the Navbar on laptop/desktop screens. It seems to only work properly on mobile screens with a size of sm or lower, displaying the hamburger menu. Any suggestions on how to make it functional ...
I have created a basic accordion feature with a text editor inside each accordion. Accordion.js <div className="wrapper"> {accordionData.map((item, index) => ( <Accordion> <Heading> <div styl ...
In my jQuery code, I have the following: function lshow() { var delayt = 500; var showtime = 5000; var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm&a ...
When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and n ...
Currently delving into the intricacies of Mongoose, I am perplexed as to why updateMany() requires a .then() at the end in order to be executed. For instance, here is the snippet that I'm endeavoring to execute, with the intention of altering the rat ...
I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...
Currently, I am utilizing .net1.1 and attempting to invoke a server-side method using jQuery upon clicking the browser's Close button. However, my code does not seem to be functioning correctly. I have provided my code below for reference. Can anyone ...
Recently, I've been working on an ajax request that sends data to a PHP file. Here's how it looks: function checkDB(code, userid) { $.ajax({ type: "POST", url: "<?php bloginfo('template_url'); ?>/profile/check_code.php ...
It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...
javascript (function($) { $(document).ready( function() { $('#client-list').change(function() { $(this).attr("selected", true); location.reload(); }); }); }); selecting an option <select id ...
I'm currently exploring the MEAN stack and I am focused on performing CRUD operations. However, when I send data in the request body from Angular to the server, I end up receiving an empty request body. I'm unsure of where I might be making a mis ...