How can you automatically adjust the height of a div to be 100% of its parent while maintaining top and bottom margins

http://jsfiddle.net/YumHS/

The page showcased in the provided jsfiddle link includes a sidebar within the content div.

<section class="cont">
                <div class="sidebar">
                    <ul>
                      <li>sidebar</li>
                    </ul>
                </div>
                <div class="content">
                  <div class="cm_logo"><img src="img/turf_cm_logo.png"></div>
                </div>
</section>

The sidebar is styled with a right border and has a 10px margin at the top. The request is to add a similar bottom margin as well. Despite using 100% height to make the div.sidebar fill up the screen, the margin at the bottom is not visible due to the sticky footer implementation. Suggestions on how to achieve this are welcomed. Your assistance is appreciated.

Refer to the jsfiddle linked above for a demonstration of the issue described.

csshtmlheightsticky-footer

Answer №1

Take a look at the fiddle for the code and demonstration

Fiddle: http://jsfiddle.net/YumHS/2

Demo: http://jsfiddle.net/YumHS/2/embedded/result/

Updated fiddle: Adjusted to 1280 x 800 resolution as per your request.

http://jsfiddle.net/YumHS/5/embedded/result/

To achieve the desired result, I utilized an image of size 1px x 2000px and manipulated the background image position in the CSS below. The height of the background image can be set as needed (see 110%;).

.sidebar {
    position: fixed;
    top: 100px;
    width: 227px;
    /*border-right: 1px solid #949698;*/
    height: 100%;
    background: url("http://img152.imageshack.us/img152/8141/fullbar.png") no-repeat right 110%;
}

In my setup, it appears like the image shown below:

Updated fiddle http://jsfiddle.net/YumHS/11/embedded/result/ - now with a spacing of 2px in the sidebar and footer.

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

Using the transform property with the scale function causes elements positioned in the bottom right corner to vanish

Issue specific to Google Chrome and Windows 10 I'm currently working on a flipbook that adjusts content size using transform:scale() based on the user's screen size. There is also a zoom feature that allows users to adjust the scale factor. I ha ...

javascriptcssangularcss-transforms

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

Extract HTML href links that correspond to a specific string from a given list of strings using Beautiful Soup

I am currently working on extracting specific URLs from a webpage that contains a list of various links. My goal is to only retrieve the URLs that match certain strings in a predetermined list. These strings are a subset of the text found within the links ...

pythonhtmlweb-scrapingbeautifulsoup

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Numerous textareas fail to function properly according to JQuery's standards

Need help with resizing multiple textarea elements dynamically as the user types in them (on the Y-axis). Currently, I have code that successfully resizes a single textarea, but it does not work when there are multiple textareas on the page. Here is the c ...

javascriptjqueryhtmlcss

Is there a way for me to have an image smoothly ascend as the caption rises?

I have put together the following html snippet: http://jsfiddle.net/4gDMK/ Everything is working smoothly, but I am struggling to figure out how to simultaneously move both the captions and the image upwards so that the entire image is no longer visible. ...

jqueryhtmlcss

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

javascripthtmlcssclient-sidestatic-html

Achieving Dynamic Center Alignment for One or Two DIVs

My goal is to create a page layout with three DIVS arranged as Left|Center|Right, while still being able to display different combinations such as Center, Left|Center, or Center|Right in the center of a wrapper div. I have been using jQuery toggle to swit ...

csshtmllayoutcss-float

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

javascriptjqueryhtml

Tips for creating a dynamic id for the <li> element

I am working on a div that contains UL and LI elements. I want to dynamically generate IDs for these LI elements, instead of using static HTML like this: <li id= "nav-fragment-1"> <li id= "nav-fragment-2"> <li id= "nav-fragment-3"> <l ...

phphtmlloopsauto-increment

Python Selenium: How to locate elements using xpath in the presence of duplicate elements within the HTML code

Currently, I am utilizing selenium to extract data from a liquor sales website to streamline the process of adding product information to a spreadsheet. My workflow involves logging into the website using selenium and searching for the specific product. Wh ...

pythonhtmlseleniumxpath

Conceal Tooltips with Materialize CSS

I'm trying to figure out how to hide the tooltip that appears when hovering over this element using Materialize CSS. <li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-pos ...

javascriptjqueryhtmlcssmaterialize

What are the steps to effectively utilize my search bar alongside Google Custom Search?

Here is the HTML code for my form: <form action="#" class="searh-holder"> <input name="se" id="se" type="text" class="search" placeholder="Search.." value="" /> <button class="search-submit" id="submit_btn"><i class="fa fa-sea ...

javascripthtmlsearchgoogle-searchgoogle-custom-search

Text positioned in a fixed location

How can I ensure that the main content stays on the right side of the sidebar without adding margin-right? Currently, the sidebar is being covered by the body content due to its fixed position. Is there a solution to prevent this issue? .App { displa ...

htmlcss

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

Using HTML strings in JavaScript code

I am currently working on a basic modal feature where I pass a string to be displayed as the content of the modal window. Here is a snippet of the script I am using: $("[id^='mod_']").click( function() { var line1 = $(this).attr("d ...

javascriptjqueryhtmlajax

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml