revealing the excessive vertical space in the div upon clicking the link

Question

revealing the excessive vertical space in the div upon clicking the link

Here is the structure:

+-----------------------------------------------------------------------+
|                                                                       |
|                      heading {position: fixed;}                        |
|_______________________________________________________________________|
|                                                                       |
|                     title1  |   title2  | title3                      |
|                                                                       |
|                                                                       |
|                                                                       |
|   tile1: here is an explanation ...                                   |
|                                                                       |
|                                                                       |
|   title2: here is an explanation ...                                  |
|                                                                       |
|                                                                       |
|   title3: here is an explanation ...                                  |
|                                                                       |
+-----------------------------------------------------------------------+

Here are my codes:

<div id = "heading">header</div>    

<a href="#title1">title1</a>
<a href="#title2">title2</a>
<a href="#title3">title3</a>

<div id="title1">tile1: here is an explanation ...</div>
<div id="title2">tile2: here is an explanation ...</div>
<div id="title3">tile3: here is an explanation ...</div>

When I click on the title1 (link), the related div is displayed at the top of the page, under the header (due to the fixed position of the header).

Here is my output: (when I click on title1)

+-----------------------------------------------------------------------+
|                                                                       |
|                      header {position: fixed;}                        |
|_______________________________________________________________________|
|   title2: here is a explanation ...                                  |
|                                                                       |
|                                                                       |
|   title3: here is a explanation ...                                  |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
+-----------------------------------------------------------------------+

However, I want this output:

+-----------------------------------------------------------------------+
|                                                                       |
|                      header {position: fixed;}                        |
|_______________________________________________________________________|
|   title1: here is a explanation ...                                  |
|                                                                       |
|                                                                       |
|   title2: here is a explanation ...                                  |
|                                                                       |
|                                                                       |
|   title3: here is a explanation ...                                  |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
|                                                                       |
+-----------------------------------------------------------------------+

How can I achieve that?

Edit:

Here is my JSFiddle link.

jquery html css

Answer 1

Answer №1

In order to achieve a fixed position for your content without using JavaScript, you must enclose it within a div:

Here is an example of the HTML structure:

<div id="header">header</div>    
<div id="content">
    <ul class="nav">
        <li><a href="#title1">title1</a></li>
        <li><a href="#title2">title2</a></li>
        <li><a href="#title3">title3</a></li>
    </ul>

    <div id="title1">tile1: here is a explanation ...</div>
    <div id="title2">tile2: here is a explanation ...</div>
    <div id="title3">tile3: here is a explanation ...</div>
</div>

This is how you can style the elements using CSS:

#header {
    background-color: lightGrey;
    padding: 10px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#content {
    background-color: Grey;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    bottom: 0;
    overflow-y: scroll;    
}

You can view a demonstration of this setup on JSFiddle: http://jsfiddle.net/tmvmazdg/3/

Answer 2

In order to achieve a fixed position for your content without using JavaScript, you must enclose it within a div:

Here is an example of the HTML structure:

<div id="header">header</div>    
<div id="content">
    <ul class="nav">
        <li><a href="#title1">title1</a></li>
        <li><a href="#title2">title2</a></li>
        <li><a href="#title3">title3</a></li>
    </ul>

    <div id="title1">tile1: here is a explanation ...</div>
    <div id="title2">tile2: here is a explanation ...</div>
    <div id="title3">tile3: here is a explanation ...</div>
</div>

This is how you can style the elements using CSS:

#header {
    background-color: lightGrey;
    padding: 10px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#content {
    background-color: Grey;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    bottom: 0;
    overflow-y: scroll;    
}

You can view a demonstration of this setup on JSFiddle: http://jsfiddle.net/tmvmazdg/3/

Answer 3

Answer №2

To achieve this effect, it is recommended to utilize styling techniques.

Start by applying padding to the top of your body element that matches the height of your banner. Next, adjust the positioning of your banner relative to the HTML element rather than the body element.

This should ideally be implemented in a separate stylesheet file, but for immediate changes (assuming your banner is 50px tall), you can modify your existing code as shown below:

<body style="padding-top: 50px;">
    <div id="header" style="position: fixed; top: 0px; left: 0px;">header</div>
...
</body>

Answer 4

To achieve this effect, it is recommended to utilize styling techniques.

Start by applying padding to the top of your body element that matches the height of your banner. Next, adjust the positioning of your banner relative to the HTML element rather than the body element.

This should ideally be implemented in a separate stylesheet file, but for immediate changes (assuming your banner is 50px tall), you can modify your existing code as shown below:

<body style="padding-top: 50px;">
    <div id="header" style="position: fixed; top: 0px; left: 0px;">header</div>
...
</body>

Answer 5

Answer №3

If you're looking to manage this with Javascript, here's a solution for you.

Check out this demonstration: http://jsfiddle.net/h2020bpn/3/

Below is an illustration using jQuery for versatility across different browsers. This code can be easily customized to suit your needs.

This snippet utilizes jQuery's .scrollTop() method:

Adjust the current vertical position of the scroll bar for each element matched in the set.

Answer 6

If you're looking to manage this with Javascript, here's a solution for you.

Check out this demonstration: http://jsfiddle.net/h2020bpn/3/

Below is an illustration using jQuery for versatility across different browsers. This code can be easily customized to suit your needs.

This snippet utilizes jQuery's .scrollTop() method:

Adjust the current vertical position of the scroll bar for each element matched in the set.

revealing the excessive vertical space in the div upon clicking the link

Answer №1

Answer №2

Answer №3

Similar questions

if else statement fails to work in ajax-based login form

Automatically generated Dropdown failing to respond to jQuery event

Tips for verifying the input field with specific requirements in Angular 6

Having trouble with Laravel 5.8 Bootstrap integration within JQuery?

Is there a way to turn off step navigation in bootstrap?

jQuery Files in Conflict

Struggling with establishing a connection between Jquery and a .php file

What is the role of z-index in relation to floating elements?

Guide on coding in Node.js to showcase an image on a web browser

Modify the button's border color upon click action

What could be causing this excessive lag?

Using jQuery Validator Plugin to verify the existence of an email address

Trouble with Updating Div Content?

Lightbox.options does not exist as a function within the lightbox plugin

Issue with Submit Button Functionality in Django Form Submission

Toggle button to collapse the Bootstrap side bar on larger screens

Seamless infinite background scrolling on the canvas without any disruptions

Tips for transferring data from a pop up window to a grid

Activate doughnut chart animation when scrolling

Vue component retrieval on the client side