What are some ways to enhance the content using CSS?

I have explored various solutions on stackoverflow, but none of them seem to work for me. I am struggling with expanding the content of the "Section" element when the page is empty.

Check out my JsFiddle Project here

HTML 

    <body>
        <header>
            <ul class="menu">
                <li><a href="">Option 1</a></li>
                <li><a href="">Option 2</a></li>
                <li><a href="">Option 3</a></li>
                <li><a href="">Option 4</a></li>
                <li id="home" class="active"><a href="">Home</a></li>
            </ul>
        </header>
        <section>
            <h1 id="titolo">Main Title<br>Sub title</h1>
            <p>A lot of Content</p>
        </section>
      <footer>
        <p>Name Surname <br> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96eff9e3e4f3fbf7fffad6fbf7fffab8f5f9fb">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2533292e39313d35301c313c31373537353c29353939">[email protected]</a></a></p>
      </footer>
    </body>
</html>

CSS

section {    
    margin: 44px 10%;
    background-color:#ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.40); 
    padding:1px;
}
htmlcss

Answer №1

If you're looking for a simpler solution, consider using flexbox. It can make your layout much easier to manage.

I made some adjustments to your code in this JSFiddle demo

HTML:

<header>
   <ul class="menu">
                <li><a href="">Option 1</a></li>
                <li><a href="">Option 2</a></li>
                <li><a href="">Option 3</a></li>
                <li><a href="">Option 4</a></li>
                <li id="home" class="active"><a href="">Home</a></li>
    </ul>
</header>

<div class="wrapper">

  <section class="content">
    <h1 id="titolo">Main Title<br>Sub title</h1>
    <p>A lot of Content</p>
  </section>
</div> <!-- /wrapper -->

<footer>
  <p>Name Surname <br> <a href=mailto:[email protected]">[email protected]</a></p>
  </footer>

CSS:

html {display: flex; flex-direction: column;} /* IE fix */
body {
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; /* (compatible IE9+) */
}
.wrapper {
  display: block; /* IE fix */
  flex: 1 1 auto; 
   display: flex;
  flex-direction: row;
}
nav {
  width: 15em;
}
.content {
  display: block; /* IE fix */
  flex: 1; 
}

body {
    margin: 0;
    background: #fff;
    font-family: "Century Gothic", helvetica, arial, sans-serif;
    font-size: 1.1em;
}

footer {
   height: 40px;
  width: 100%;
  text-align: center;
  background-color:#303030;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.99);
  color:white;
}

/* Rest of the CSS properties remain the same */

Interested in learning more about Flexbox? Check out this resource

Answer №2

One possible solution is to utilize the height property.

article {    
padding: 20px;
background-color:#f9f9f9;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15); 
margin-bottom:10px;
height: auto; 
/* or you may manually specify a value */
height: 300px (or any desired size);
}

Answer №3

Not sure if this is exactly what you're looking for, but you can give it a try:

html,body{
  height:100%;
}

Also, make sure to include the following in your section tag:

section{
   height:100%;
}

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

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

JavaScript function occasionally experiences loading issues with CSS images

Have you ever encountered issues with a CSS background image failing to load? What might be the underlying cause? I've written some Javascript code that looks like this: function progressBar(file_id) { pbar = ($("<div />").attr('id&a ...

javascriptcssfile-uploadbackground-image

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

htmlcssflask

Completing the remainder of the page with CSS styling

Currently, I have three Divs positioned absolutely on the page - leftDiv, middleDiv, and rightDiv. The middleDiv has a width of 900px, which is fine. However, I need the leftDiv and rightDiv to fill the remaining space on the left and right sides, regardle ...

asp.netcsshtml

Adjust the positioning of an HTML element in relation to another to prevent elements from moving erratically

Currently, I am working on a website where I have implemented some javascript to achieve a 'typewriter' effect for the prominent middle-centered text displayed below. The script is designed to animate the text by typing it letter by letter in a f ...

javascripthtmlcss

Using Javascript to extract a custom attribute from a button element

In my HTML, there is a button that has a custom property called data-filter-params: <button class="button" type="submit" data-filter-params="{'Type', 'Filter.Type'},{'Code','Filter.Code'}" >Filter</button&g ...

javascriptjqueryhtmlasp.net-mvc

Having difficulty altering the div color in real-time using VueJS

I'm currently in the process of building an application with Bootstrap and VueJS. My goal is to create a folder structure similar to Google Drive, where I want to make a div stand out in blue once it's selected. Below is the code snippet: ex ...

javascriptjqueryhtmlcssvue.js

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

javascripthtmljqueryvariables

Switching the background color in a diagonal transition when hovering from the bottom left to the top right

I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right? Here is the CSS and HTML code ...

htmlcssanimationtransitionlinear-gradients

Solution for dropdown boxes malfunctioning with required fields

Using Bootstrap 3 for field validation on forms has been effective, but there seems to be an issue with certain browsers such as ios safari not validating [required] form items. To address this, I created a script that checks if an element is marked as req ...

javascriptjqueryhtmltwitter-bootstrap

Keeping information saved locally until an internet connection is established

I have a vision to develop a Web app focused on receiving feedback, but the challenge lies in the fact that it will be utilized on a device without an internet connection. The plan is for it to save any user input offline until connectivity is restored. Th ...

phpmysqlajaxhtmllocal-storage

Three divs aligned horizontally

Can anyone help me create a layout with a left menu, right menu, and a middle section with page content arranged like this example: I am attempting to build this layout using Bootstrap 4 for responsive design, but I am struggling to get all three menus to ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to create a form with two inputs that redirects me to a different page based on the inputs chosen?

Seeking assistance to resolve a challenging problem that I am currently facing. Any suggestions on the technology or backend skills needed for this task would be greatly appreciated, as well as any advice that can help me progress in the right direction. ...

javascripthtmlformsbackend

Images displayed in the Slick carousel are automatically given a stylish padding

I'm facing an issue with my slick-carousel where there seems to be a large padding on the right side of the images, extending all the way up to the next product image. I've tried removing margins and paddings from my code but it hasn't resol ...

cssimageshopifypaddingslick.js

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

phphtmlajax

What is the process for inserting a new column into an order list on Opencart?

I'm looking to customize the table in opencart's admin dashboard by adding a new column for 'company name' between 'Customer' and 'Status'. Can anyone guide me on how to achieve this? Which specific file do I need t ...

phphtmldashboardopencart2.x

Guide to toggling the anchor tag functionality as a button with JavaScript

I am trying to dynamically enable or disable an anchor tag that is used as a button using JavaScript. Within a certain condition, I want to control the state of this button. Here is the specific button in question: <div class="row my-2 text-right& ...

javascripthtml

Accessing the Bootstrap tab form from an external source

I currently have Bootstrap tabs on a page and they are functioning correctly. However, I am looking to open these tabs from an external page. Is this feasible? <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> ...

javascriptjqueryangularjshtmltwitter-bootstrap

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click