Ways to style html header and content separately using css and implementing scroll function for the content

I am relatively new to html and css, but I need to create a basic html page for my courses. I am encountering an issue where the content on my page is not scrolling properly. If you take a look at this page: , you'll see what I mean. It's likely a simple mistake that newbie like me would make, so I would appreciate it if someone could point out what I'm doing incorrectly.

Answer №1

To optimize the display, adjust the height by using max-height:75% in place of height:100%.

#main-content {
    max-height: 75%;
    overflow: auto;
    text-align: center;
    width: 100%;
}

I trust this solution will be beneficial for you.

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

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

Tips for customizing the style of a TextBox

In my website, I utilize bootstrap along with custom CSS styles as shown below: .ff { // id of the form font: 15px/1.6em Lato, serif; max-width: 280px; margin: 0 auto; margin-top: 20px; color: #767a7f; } .ff div { position: rel ...

Sending a form to an iframe with Jquery

I am attempting to display a SSRS report with parameters in an IFrame using Jquery. My current approach involves using the Form target attribute to load it into the IFrame, but it ends up opening in a new window instead. Here is the HTML Code: <iframe ...

What is the reason behind the additional height created by line-height?

<div><iframe style="height: 100px"></iframe></div> <div style="line-height: 0"><iframe style="height: 100px"></iframe></div> Click here to view the code snippet on jsFiddle. Upon inspecting the DOM, it is e ...

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

Why did my compilation process fail to include the style files despite compiling all other files successfully?

As English is not my first language, I kindly ask for your understanding with any typing mistakes. I have created a workspace with the image depicted here; Afterwards, I executed "tsc -p ." to compile my files; You can view the generated files here Unf ...

Troubleshooting an issue with IE regarding box-shadow CSS functionality

I have a problem with my website design where the box-shadow effect on the top menu is not displaying properly in Internet Explorer. I tried adding specific code for IE8 and lower versions to fix this issue: zoom:1; /* This enables hasLayout, which is nec ...

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

Utilize Express Handlebars to render an input-generated list for display

My goal is to showcase a collection of wishlist items on a basic webpage through user interaction. Here's how I envision it: 1. do something 2. do another thing 3. blahblah This snippet shows my index.js code: var wishlist = []; router.post('/& ...

Incorporating a download link with the combination of canvg and amcharts

I am attempting to include a download link on a page that utilizes AmCharts and CanVG. The visualization of the graph and image is functioning properly. Now, I am in need of a download link to offer users the ability to download the displayed graph image. ...

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

Are numerous h1 tags allowed?

Many debates have arisen regarding the use of multiple h1 tags on a single web page. What if additional semantic meaning is provided using hgroup, article, header, footer, and section tags? Despite numerous discussions, a definitive answer remains elusiv ...

Why does the parent URL become the origin for an AJAX request coming from an iframe?

I am facing an issue with a website where I need to load an iframe from a different subdomain. The main website is hosted on portal.domain.com, and the iframe is on iframe.domain.com. To make requests to iframe.domain.com from portal.domain.com, I decided ...

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

Tips for preventing form elements from lingering on the page after submission

Is there a way in JavaScript to prevent the repetition of elements when matching conditions and executing new ones? function createElements(type) { var form = document.createElement('form'); form.setAttribute('method' ...

The results from various <div> elements are displayed based on the selection made from the dropdown menu

<body> <label for="country">Country : </label> <select id="country"> <option>Please select</option> <option name="CountryRevenue">Revenue</option> <option name="CountryQuantity">Quantity ...

Scrollable Bootstrap navigation bar

I'm attempting to modify the Bootstrap navbar's behavior so that it utilizes a horizontal scroll instead of collapsing. While this works on mobile devices, I want it to function the same way on all devices using SASS: .navbar-nav { li { di ...

What causes certain div content to be absent from ZoneTemplate within an ASP.NET web part?

Check out this snippet of code: <asp:WebPartZone ID="Zone1" runat="server" Width="100%" PartChromeType="None" Padding="0" PartStyle-CssClass="NoPadding" PartStyle-BackColor="Transparent" BackColor="Transparent" PartChromeStyle-BackColor ...

``It appears that the reader.onload function is behaving unexpectedly on Android

I've been troubleshooting a bug in my project that works on iOS and desktop browsers but fails silently on android. I suspect the issue might have something to do with my FileReader. Any insights or advice would be greatly appreciated! function hand ...

"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. ...