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

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

css

Explore additional sub-categories by clicking on them with the help of jQuery or alternate techniques

I am currently working on a Magento store that has Categories with an overwhelming amount of sub-categories, taking up almost half of the page. I want to enhance user experience by implementing a feature that displays a "Load more" button when there are mo ...

javascriptjqueryajaxmagento

How can I customize the color of the border/background on my jquery menu?

I have been using the jquery function menu() to generate a menu, and it's working as expected. However, there is one aspect that I would like to customize: the white border around the menu button should be black instead. You can see what I mean by ...

jquerycssmenubackground-color

Is it feasible to use a component in a recursively manner?

Following a two-hour search for a solution, I decided to reach out to experts as I suspected the answer might be simpler than expected. The project in question is an Angular7 one. In my goals component, I aim to include a "goal" with a button labeled "+". ...

htmlangulartypescriptcomponents

Is HTML5 compatible with Google Tag Manager Custom HTML?

I recently inserted a basic HTML code into my website. <header><p>hello</p></header> However, I encountered an error stating that the HTML, CSS or script is invalid and therefore preventing me from publishing it. Does anyone have ...

htmlgoogle-analyticsgoogle-tag-manager

Generating dynamic JSON arrays to create multiple data tables

I need to generate multiple datatables for each jsonobject [which represents weekly attendance data] in the jsonarray. By making an ajax request, I am retrieving the JSON Array from Java. Can someone guide me on how to create multiple datatables for each ...

jqueryjsonajaxjspdatatables

How to Load XML Using jQuery Ajax in PHP Server Side Script

I'm facing a challenge with PHP Code that is being called from a jQuery.Ajax request. The basic code looks like this: In process.php: $video_id = "u-KoTOhbn30"; $url = "http://gdata.youtube.com/feeds/api/videos/" . $video_id; $doc = simplexml_load_ ...

phpjqueryxmlajax

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

htmlcsstwitter-bootstrapbootstrap-4

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

My Angular application is quite complex and relies heavily on pure cesium. Upon startup, I am encountering numerous warnings such as: Violation ‘requestAnimationFrame’ handler took 742ms. Violation ‘load’ handler took 80ms. I attempted to resolve ...

htmlangulartypescript

Jquery: Undefined Key/Value Declaration

I'm diving into the world of associative arrays for the first time and trying to access data using keys. While my array is being constructed successfully, I'm struggling to actually retrieve the data. As a result, the console.log statement at the ...

javascriptjqueryarrays

Ensure that the heights of various Flexbox rows are always visible within the boundaries of the browser window

Within flexbox, I've laid out three rows of boxes with varying heights. This layout ensures that the rows always align perfectly with the bottom of the browser window without any gaps. You can see the full layout on Codepen by following this link: htt ...

htmlcsssassresponsive-design

Arranging nested Divs for horizontal scrolling purposes

I'm struggling to achieve horizontal scrolling only in my provided example link HERE. It seems like a simple fix should be adding {overflow-x:auto; and overflow-y:hidden;} in the CSS, but I've tried that and it's not giving me the desired re ...

htmlcss

The webpage encountered an issue while trying to load a resource: the server returned a 500 (Internal Server Error) status message, preventing the submission of the data

When I use AJAX jQuery to send data via POST, the input name does not get sent and the database shows NULL as the answer. Thank you for any assistance. Below is my JQuery code: $('#btn-save').click(function(){ $.ajax({ url: "<? ...

javascriptphpjqueryajaxcodeigniter

What could be causing a .ts file to not play correctly?

I need help downloading a video from the following URL: I have successfully downloaded the file, but none of my video players can play it. Could it be encrypted? Is there a solution to make it work? Appreciate any help! ...

htmlvideotype-conversionvideo-streamingvideo-player

Execute a function when a selection option is chosen consecutively two times

I have a dynamic dropdown menu that uses AJAX to load options. I need the function to be triggered not only when an option is changed, but also when the same option is clicked multiple times in a row. In other words, I want the function to run every time a ...

javascriptjqueryhtml

What is the best way to empty the HTML content of a specific id using jQuery?

In my current project, I am working with a combination of Smarty template, PHP, and Ajax. Below is a snippet of code from my Smarty template: <td align="left" id="subject_container" colspan="2" valign="top"> <form> <table cellpaddin ...

phpajaxjquerysmarty

The JQuery function has not been defined within the scripts file

It seems like my jquery function is suddenly undefined and I can't figure out why. I made sure to call jquery before the scripts file, so that's not the issue. Strangely, the jquery was functioning properly until I placed it inside this specific ...

jqueryfunction

Unable to load the type [ProjectName].WebAPIApplication in the Web API application

I am currently working on a .Net Web Application that utilizes the Web.API Project Properties indicating it is built with .Net 4.5. Within my web page, the code snippet below is used to call one of the methods: $.ajax({ type: 'POST', u ...

c#jquery.net

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4