fixed element extends beyond container height

When dealing with a parent div containing both fixed height and 100% height divs, it's possible for the fixed height div to overlap its parent. Take a look at this fiddle for an example: http://jsfiddle.net/Wcgvt/.

Thank you!

Answer №1

After forking your Fiddle, I made some enhancements by implementing CSS here.

The key is to set your container (d3) with position: relative, allowing the use of position: absolute on the overflowing container. See below:

.d3 {
    height:100%; 
    position: relative;
}

.d3-2 {
    max-height: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0px;
    top: 54px;
    left: 0px;
    right: 0px;
}

In this example, I positioned it 54px below the header and aligned it to the edges. Adjust top: 54px according to your header's height.

One thing to note is that you must specify a fixed height for the header when using this technique.


On another note, make sure to use more descriptive class names in your actual code; it can get confusing distinguishing between multiple d classes.

Answer №2

Give this a shot:

.d3 {
  width:50%;
  overflow: auto;
}

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

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...

Press this HTML button to trigger a JavaScript function

Seeking assistance in creating a button that triggers a JavaScript function to generate a crossword-style grid. I have attempted to write the necessary JavaScript code for the grid creation and set up the button with the onclick event, but unfortunately, ...

How to align li elements at center in a Bootstrap navbar

I'm having trouble centering link1 and link2 both horizontally and vertically on the page. The horizontal alignment is working fine, but I can't seem to get the vertical alignment right, no matter what I try. Here is the HTML code snippet: ...

Python code to convert HTML into JSON format

"I'm currently searching for an efficient method to convert HTML to JSON using Python, but so far I've only come across complex ways that require manual building which seems impractical for large HTML files. Can anyone provide assistance? I' ...

Tiny cutout circle nestled within a larger circle, subtly placed in the bottom right corner using Bootstrap

In my JavaScript code, I have created an array of images arranged in a row on the webpage using the split method. The images are displayed in circles. However, I now need to add a smaller circle cutout at the bottom right of each larger circle to showcase ...

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

Troubleshooting Website Navigation Bar and Layout with HTML, CSS, and Bootstrap5

I am facing a challenge with navbar positioning. My navbar items are missing after adding the image below. I have attempted to adjust the element positions but to no avail :( I also tried to create a fixed-top navbar, but it didn't work either :( I ...

Behaviors of size are specified differently in percentage and em/px units

My page consists of a navigation bar wrapped in a header element and a content frame that should be placed below it, both sharing the same width. When I specify the header width using percentages, this is how the page appears: However, when I define the ...

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

Exploring the concept of Anchors within the React

I am attempting to replicate a layout like this on my React frontend: <p> <h1>Foo</h1> <a href="#second"></a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labo ...

The function openModel() in AngularJS is generating an error indicating that it is not a valid function

I am facing an issue with my project that combines AngularJS and Materialize CSS. I am trying to open a modal with id #modal-some-form using AngularJS $('#model-some-form').openModel();. Interestingly, I have another project with similar code, u ...

Tips for adding a search button within the input field

My goal is to incorporate a circular search button at the end of an input field, but I'm struggling with the logic to achieve this. I am using Font Awesome to display the icons. .search-box { outline: none; padding: 7px; padding-left: 10px; ...

The fadeOut() method is currently only functioning on the initial item

Recently, I've been experimenting with jQuery and I decided to create a simple to-do list application. However, I encountered an issue with my code. When I check an item that is not the first item on the list, the fadeOut() function does not work prop ...

Nested scrolling bars within each other

Currently, I am importing photos from a Facebook page and displaying them on my jQuery mobile webpage using the photoSwipe plugin. However, there seems to be an issue with the final appearance of the images. Pay attention to the image where the red arrow ...

What is the process for embedding iframe content onto a main webpage?

I'm facing a challenge with an iframe on my page that contains important content. How can I add additional content to the page where this iframe is located? Any suggestions would be greatly appreciated. Thanks! ...

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...

The form is failing to transmit the button data

I'm encountering a strange issue with my form. It successfully sends the data from the textboxes, but it fails to send the button data along with it. Here is the structure of my form: <form name="login_registro" method="POST" id="login_registro"& ...

Deactivate one select box depending on the value chosen in another select box

I am looking to disable one select box when the other select box equals 1, and vice versa. While I know how to achieve this with IDs, the challenge arises as the select boxes I want to target have dynamically generated IDs and names via PHP. Therefore, I n ...

Generating visual content from an application programming interface

<div class="row box"> <div class="col-md-4 pic"></div> <div id="temperature" class="col-md-4 change make_blue bigger_text"> Placeholder </div> <div class="col-md-4"> <button id="getChange" class="make_ ...

AngularJS ui-router in HTML5 mode is a powerful combination that allows

Hey, I'm looking to implement HTML5 mode in my project. Here's how my file structure looks: mypage.de/mysub I can only make changes within the "mysub" directory. So far, I've added the following into my index.html: <base href="/mysub/ ...