Set the height of the unordered list (ul) to be

I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element.

<ul class="timeline">...</ul>

I want the line in the middle to fill the height of the page even when there is less content present.

My goal is to make sure the 'line' fills the remaining height of the page.

.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}

Adding 'height:100%;' to .timeline doesn't seem to solve the issue.

To experiment with this further, I have created a fiddle: http://jsfiddle.net/4EJNt/1/

jqueryhtmlcss

Answer №1

Check out the Fiddle here

The issue lies in the fact that your .container element does not have a height:100% set, causing the <ul> element to appear as if it is not filling all available space. In reality, it is just that the height of your .container and <ul> elements are the same.

In the provided fiddle, the body tag also shares the same height as the .container element. To visualize this better, try applying these styles in your fiddle:

html, body, .container, ul.timeline
{
    height:100%;
}

Answer №2

To fix the excessive margin coming from the bootstrap.css file, simply add the following CSS:

div.container > div.page-header {
    margin-bottom:0px;
}

For a visual representation, you can view this fiddle: http://jsfiddle.net/4EJNt/4/

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

Unable to change data in table TD using AJAX and PHP received JSON array

I am currently facing an issue with a PHP-AJAX script that is responsible for deleting financial rows from a table. The PHP script is functioning correctly and successfully deleting the rows. However, the problem arises within the success function of the A ...

javascriptjqueryajax

Style your content using PHP and CSS to format text with multiple selectors

My HTML code looks like this: <div id="main"> <aside class="readableCenterAside left"> ## Content 1 ## </aside> <aside class="readableCenterAside right"> ## Content 2 ## </aside> </div> Here is my CSS: .readableCe ...

htmlcsscss-selectors

mobile screens causing bootstrap columns to overlap

The code I am working with is shown below: <div class="container"> <div class="col-md-3 calendar"> </div> <div class="col-md-9"> <button></button> (more buttons...) </div> < ...

htmlcssbootstrap-4

Failure to prepare mySQLi statement due to multiple question marks being used in the form

Hello, I am currently working on implementing a multi field search feature. The form consists of four fields and the user has the flexibility to input information into one or more fields for querying the database. While the SQL query functions correctly i ...

phphtmlmysqlsqlmysqli

Inject Angularjs Controller into Module Once DOM is Initialized: Tips and Tricks

When injecting new DOM elements with a controller, I encountered the following issue: app.controller('cart', function ($scope, $http) { $scope.content = { label: "hello, world!", }; }); var $html = '<div ng-controller="c ...

javascriptjqueryangularjs

Troubleshooting: When Angular Fade In Out Animation Won't Work

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...

htmlcssangularanimationangular-animations

Move the last specified elements to the beginning of the array

I have an array let colorsArr = ["red", "green", "purple", "pink", "black"]; Is there a way to retrieve a specific number of elements from the END and move them to the BEGINNING of the array? Desired result: example 1: //move last 3 elements let expec ...

javascriptjquery

Numerous toggles available for the mobile version

Hey there, I need some help! I have a footer navigation on my desktop website with 3 Ul elements. I want to turn each Ul into a toggle for the mobile version. Can anyone assist me with this? Thanks in advance! <footer class="footer"> <d ...

javascriptjqueryhtmlcss

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Executing Python scripts asynchronously by pressing a button

I have a typical LAMP setup running on my Raspberry Pi. Within my HTML interface, I have indicators and buttons. Utilizing Jquery, I am able to pull data from server-side text files into the indicators, and intend to use buttons to manipulate these indica ...

jquerypythonajaxcgi

Change the position of an array element when displayed on an HTML page

I'm trying to figure out a way to manipulate the position of an HTML element that is stored inside an array. The issue I am facing is that my code generates a new div every time a specific function is called, and this div has a class applied to it for ...

javascripthtmlcss

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

When using elements like yii CHtml::link, what are the recommended practices? I'm working on a button that needs to include an icon, text, respond to hover events, and be wide. Are there any benefits to using CHtml instead of a regular tag that can e ...

jqueryhtmlcssyiiyii-chtml

What is the best way to add three dots at the end of text when it exceeds the available space?

What CSS property is utilized to display three dots at the end of text when it overflows? ...

htmlcss

Uploading MultipartFile with additional parameters in Spring MVC 4 using AJAX

Currently in the process of developing a file upload feature using AJAX (jQuery) and Spring MVC 4. Aside from just uploading the file itself, additional parameters such as a description need to be sent along. The approach involves an $.ajax() call to send ...

javajqueryajaxspring-mvcspring-annotations

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

htmlangulartypescript

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

Download files using AJAX in Laravel 5.6

I am faced with a challenge in my Laravel 5.6 REST API. Users have the capability to upload their files to a non-public folder. Now, I need to ensure that users can only download files if their JWT token is valid and they have the necessary privilege. H ...

phpjqueryajaxlaravel-5download

Enhancing the functionality of hidden input fields using jQuery

I'm looking to dynamically update the value of a hidden input element when a button is clicked. Here's what I have so far: Hidden Input Element: <input type="hidden" value="action" id="action" /> Buttons: <INPUT name=submit value=~#S ...

javascriptjqueryhtml