A row divided into three segments in Twitter Bootstrap2, with the second segment spanning the rest

Looking to divide a row into three segments under the following conditions:

  • The first segment should have a maximum height and always stay at the top (minimum height of 0; maximum height of 40%). If the content exceeds the max-height, a scroll bar should appear.

  • The third segment needs to be positioned at the bottom with no fixed height. Its height should be based on its content.

  • The second segment must expand to fill 100% of the remaining height. A scroll bar should appear if the content is too large for the available height.

I have attempted to achieve this using the code found here: https://gist.github.com/anonymous/24809e7b981f4ca7e6fb. However, I am facing an issue where the middle/second segment expands all the way to the bottom, overlapping the third segment.

If anyone has any suggestions on how to resolve this problem, please let me know. Thank you.

htmlcsstwitter-bootstrap

Answer №1

Try using the following code snippet:

<div class="container">
    <div class="top-section" style="max-height:50%;overflow:auto;"></div>
    <div class="bottom-section" style="height:50%;"></div>
</div>
<div class="container">
    <div class="footer-section" style="position:absolute;bottom:0;">
</div>

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

The HTML slideshow is not automatically showing up as intended

I need to make a few adjustments to the picture slideshow on my website. Currently, all the pictures are displayed at once when you first visit the site, and it only turns into a slideshow when you click the scroll arrows. I want it to start as a slideshow ...

javascripthtml

One way to view inherited width while ensuring that data remains inside a pre tag is by utilizing CSS

Currently, I'm facing an issue with displaying PHP and Javascript code within pre tags in a project. The problem arises as the code spills outside the boundary of the containing element. While inspecting the console, I am attempting to identify the so ...

htmlcss

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

I am facing an issue with the buttons on my website, as they seem to resize based on the amount of text present. When there are 2 lines of text, the buttons appear larger compared to those with just one line. How can I rectify this situation? Although thi ...

phphtmlwordpresscss

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

htmlasp.net.netasp.net-corerazor

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

I am working with a custom Dojo widget that is based on a template and has an HTML template stored in a separate .html file. Here is the Dojo Widget code snippet: define("dojow/SomeWidgetName",[ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_Templat ...

javascripthtmldojo

Enhancing the appearance of a checkbox within a ReactJS setting

I'm having trouble customizing a checkbox in a ReactJS environment for IE11. I've tried various approaches, but nothing seems to work. Can anyone offer any advice? Here is the code snippet: CSS: .squared { input[type=checkbox] { bo ...

javascripthtmlcssreactjscheckbox

Adjust the child element's value by referencing the parent class name

I need to update the content of child elements within an HTML file based on the class name of their parent element, using JavaScript. While I have successfully achieved this for static values by creating a TreeWalker for text nodes, doing the same for dyn ...

javascripthtmlelement

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

Please view the file by accessing exclusively mydomain_name/filename.html

I am looking for a way to block access to specific URLs on my domain and redirect them to another page. The user should still see the original URL in the address bar, and all styles and scripts need to function properly. Can someone help me achieve this? ...

phphtml.htaccess

Can you remind me of the specific CSS class used for Internet Explorer in Twitter Bootstrap?

Currently utilizing Twitter Bootstrap and curious if there is a specific CSS class to designate IE browsers within the BODY or HTML tags. Interested in writing CSS specifically for all IE browsers. Aware that Bootstrap offers some CSS classes for IE brows ...

htmlcssinternet-explorertwitter-bootstrap

What is the best way to visually refresh a polymer element that displays data from a frequently changing URL?

Hey there! I'm currently facing an issue with displaying a polymer element that contains some important information. This element is supposed to appear when I tap on an icon, but for some reason it doesn't show up even after the data has been loa ...

javascripthtmlpolymerweb-component

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

javascriptcss

Extracting content from HTML-formatted email

When I receive inbound emails with HTML formatting that has been copied and pasted from office applications like Outlook, it often causes formatting issues when displayed on my HTML enabled UI. To address this problem, I usually copy the HTML content to an ...

c#htmlcssasp.nethtml-parsing

What is the best way to integrate JavaScript with my HTML command box?

I'm having some trouble with an HTML command box that is supposed to execute commands like changing stylesheets and other tasks. I thought I had everything set up correctly, but it doesn't seem to be working at all. Below is the HTML code with th ...

javascripthtml

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

Developing a perpetually scrolling container within a webpage

I am attempting to implement a scrollable div on my webpage that can continuously load content. I am currently using the following code snippet for this --> http://jsfiddle.net/cyrus2013/Qq85d/ $(document).ready(function(){ function loadMoreContent() ...

javascriptjqueryhtmlcss

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

javascriptjqueryhtmlcss

A guide on troubleshooting anchor links that are occasionally functioning properly, but at other times directing users to the incorrect destination

I must admit that I am a total beginner when it comes to coding. I hope this is the right platform to share my confusion. Using Wordpress Gutenberg, I attempted to craft a lengthy article. A main table of contents was placed near the top of the page (done ...

html

When the page is resized for mobile, the Bootstrap modal shifts downwards

I am encountering an issue with a modal that pops up on my webpage when clicked. It is perfectly centered in a browser view and smaller views. However, when I resize the page for phones, the modal shifts down the page and requires scrolling to see it. How ...

javascripthtmlcsstwitter-bootstrap

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js