What is the best way to place an anchor so that it is perfectly aligned between a static header and footer?

I am looking to create a website where the content is placed below a fixed header and footer. Navigation is to be done through anchors, with only the active anchor being displayed while the rest remains hidden by the header and footer (similar to a window). I have managed to position the content, header, and footer, but I am unsure of how to set the anchors so that when clicked, the content of the anchor appears in the precise location between the header and footer.

I hope someone can understand my vision.

I am looking to achieve this using only CSS and HTML, without the use of jQuery or JavaScript.

For reference, please see the following example:

htmlcss

Answer №1

Would you like to attempt the following solution:

#anchor {    
  position:absolute;
  top:50%;
}

Answer №2

To achieve this effect, utilize the box-sizing property.

Here is an example:

FIDDLE1 FIDDLE2

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}

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

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

Node JS login leads to fetching /favicon.ico

I've implemented a login/register system using express (passport) on my website. I'm facing an issue where after the user logs in, they are redirected to /favicon.ico instead of the saved originalUrl. Can anyone help me identify what might be cau ...

htmlnode.jsexpresshttp-redirectfavicon

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

Is there a way to change the border color of a label when a checkbox is checked using CSS selectors? Here's an example of what I have tried: label{ width:36px; height:36px; padding:9px; border:1px solid gray; border-radius:36px; } #check ...

htmlcss

I am looking to position the search bar all the way to the right side

I've been struggling to properly align the search bar within my navigation bar. Despite my best efforts, I can't seem to get it right. Below is just a snippet of my navbar code, showcasing the search bar within a div container. .search { ...

htmlcssalignment

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

javascriptjqueryhtmlcssgoogle-chrome

How to configure dropdown options in Angular 2

I have been struggling to set the display of a select tag to the value obtained from another call. Despite my attempts with [selected], [ngValue], [value], and more, I have not been successful. <select class="form-control" [(ngModel)]="selectedRegion" ...

htmlangularselectdefault-valuedisplay

Difficulty adapting CSS using JavaScript

I am looking to adjust the padding of my header to give it a sleeker appearance on the page. I attempted to achieve this with the code below, but it seems to have no effect: function openPage() { var i, el = document.getElementById('headbar' ...

javascripthtmlcssdom

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

javascriptjqueryhtmlcss

Modify the click function from <tr> to <td> tag

I want to create an HTML page that functions as a digital library for books. Users should be able to click on a rate button to save the selected book to local storage, allowing them to see their rating whenever they revisit the page. However, I'm enc ...

javascriptjqueryhtml

When I retrieve a URL from PHP, I receive XY data in JSON format. The output appears as [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}], but the final outcome is reported as "undefined"

When I try to retrieve XY coordinates from a URL in JSON using PHP, the returned result looks like [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}]. However, the end result shows as "undefine ...

htmljqueryjson

Various background positions

Is it possible to declare multiple background positions for the same background image? I have a span with the class page_heading and I want this class to display the same image twice, once at the beginning of the text and once at the end. HTML: <h1&g ...

cssbackground-image

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

Consistent word spacing across several lines

Can someone help me with an issue I'm facing? It seems simple, but I can't seem to figure it out. I am looking for a way to maintain consistent spacing between words on multiple lines without using tables. Essentially, I want something like invi ...

htmlcss

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

javascriptjqueryhtmltwitter-bootstrap-3

Issue with Bootstrap spinner not functioning properly within a table featuring a sticky header

In the Razor Page app I'm working on, the index page features a table with a sticky header and a spinner in one of the columns. However, when the table is scrolled vertically, the text in the column goes under the sticky header, while the spinner rema ...

htmlbootstrap-5

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Problem with app-theme.html not being recognized within a custom element

While developing a web app with polymer, I encountered an issue with a custom element called side-bar. I have a separate file named app-theme.html where all the styles for the app are defined. However, when I moved the side-bar element into its own templat ...

htmlcsspolymerpolymer-1.0

Dynamically obtaining the screen width in JSP using a variable

Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...

javascriptcssjsp

Resolved z-index problem in modal dialog box

My fixed modal has a z-index set to 100, but it seems to be positioned below an element with a z-index of 2 and a position set to relative. I'm not sure why this is happening. You can view the code in this fiddle. Any insights or assistance would be g ...

css