Make the buttons stretch across the width of the window

When the App is launched, it will display two buttons in the footer by default.
If users interact with the app in a certain way, a third button may need to be added. However, based on other user selections within the app, this button may also need to be hidden.

The text inside each button should be centered horizontally and the footer should be completely covered by the buttons, except for a small vertical gap for spacing.
I noticed that my code has an unexpected empty space on the right side of the footer.

I'm seeking the best solution to address this issue, preferably using as much CSS as possible, with some assistance from JavaScript. Thank you!

https://i.sstatic.net/qZTYC.png

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

header > button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}

label.pageTitle {
    display: inline-block;
    width: calc(100% - 5em);
    text-align: center;
    color: turquoise;
}

header {
    border-bottom: 1px solid black;
    width: 100%;
    position: fixed;
    top: 0;
}

section {
    margin-top: 40px;
}


footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer > button {
    font-size: 1em;
    padding: 0.5em 1em;

}

header, footer {
    background-color: white;
}
<!doctype html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />
</head>

<body >
<header>
    <button class="menuLeft" type="button" >&#9776;</button>
    <label class="pageTitle">Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ...

javascripthtmlcss

Answer №1

Are you finding what you need here?

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

header > button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}

label.pageTitle {
    display: inline-block;
    width: calc(100% - 5em);
    text-align: center;
    color: turquoise;
}

header {
    border-bottom: 1px solid black;
    width: 100%;
    position: fixed;
    top: 0;
}

section {
    margin-top: 40px;
}


footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

footer > button {
    display: inline-block;
    font-size: 1em;
    padding: 0.5em 1em;
}

header, footer {
    background-color: white;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />
</head>

<body >
<header>
    <button class="menuLeft" type="button" >&#9776;</button>
    <label class="pageTitle">Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat sa...loremlt;/p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem  Lorem ipsum dolor sit amet, consectetur adipisicing ...epet specevelor incididunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>

<footer>
    <button class="menuLeft" type="button" >NO</button>
    <button class="menuLeft" type="button" >EXTRA</button>
    <button class="menuRight" type="button">YES</button>
</footer>

</body>
</html>

Answer №2

To achieve uniform size for all three buttons, you can apply the following CSS code:

footer > button {
    padding: 0.5em 1em;
    width: 33.33%;
    margin: 0 1%;
    float: left;
    box-sizing: border-box;
}

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

What is the best way to load a model and save it to a variable for future use?

One issue I'm facing involves loading a model in this manner: var Beech; var loader = new THREE.JSONLoader(); loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) { Beech = addMorphTree(geometry,materials,0.5); }); and uti ...

javascriptmodelthree.jsload

Mastering intricate CSS customization

The situation I have a specific issue with CSS that I need help with. I am currently working on customizing the user interface of our Zimbra deployment, which uses jetty (a platform I am not very familiar with). I have come across two files that seem to b ...

htmlcssjettyzimbra

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

These are the repositories linked to this question. Client - https://github.com/Phillip-England/plank-steady Server - https://github.com/Phillip-England/squid-tank Firstly, thank you for taking the time. Your help is much appreciated. Here's what I ...

javascriptnode.jsreactjstypescriptnext.js

The most effective method for mapping JSON data to a <Table/> component using the Fetch API in React.js

I'm perplexed that I have to ask such an obvious question, yet I keep encountering errors in the console log. I'm attempting to map some JSON elements to a table but can't seem to figure out the correct way. The console is indicating it does ...

javascriptreactjsuitableviewfetch-api

What is the best way to incorporate link tags into text in AngularJS?

I'm struggling with making links within strings clickable in Angular. Can anyone provide guidance on how to accomplish this? One of the string examples from my JSON data is: "I’m hosting #AFF Catwalk Show @Bullring on 27th Sept with @BillieFaiers. ...

javascripthtmlangularjsjsonstring

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

Trouble with Angular: Passing output between child components is not working

Just dipping my toes into Angular, I started learning it yesterday for a take-home job interview project. Please excuse any rookie mistakes in advance. For some hands-on practice, I decided to work on a basic project where the main component (app) has two ...

javascriptangularfrontendcomponents

I am currently working on creating a shopping cart that includes a delete button for removing items with just a click

I am currently working on developing a shopping cart feature that includes a remove button to delete items when clicked. I have achieved this using the filter method. However, I am facing an issue where after deleting an item and then adding it back, the ...

javascriptreactjs

Select elements in jQuery using both a specific selector and a negative selector

I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...

javascriptjqueryhtmlcss

Obtain access to a Java list of objects using JavaScript or ExtJS

Interested in working on a list of objects with JavaScript, potentially using ExtJS as well in the project. There are two lists in the JSP file (modelList and categoryList) forwarded by the controller, and the goal is to access data in both lists. Is this ...

javajavascriptlistextjs

Automatically trigger a popup box to appear following an AJAX request

I am currently working on a time counter script that triggers a code execution through ajax upon completion. The result of the code should be displayed in a popup box. Below is the code snippet I am using: var ticker = function() { counter--; var t = ...

javascriptjqueryajax

Updating Bootstrap modal content based on button clickExplanation on how to dynamically change the content

I am looking to dynamically change the content displayed inside a modal based on the button that is clicked. For example, clicking button one will only show the div with the class 'one' while hiding the others. $('#exampleModalCenter&a ...

javascripthtmljquerybootstrap-modal

Unit testing a React component by using the `renderToString` method

Context My React application is built using the React Starter Kit. In the server.js file, components are rendered using renderToStaticMarkup and then passed to the Html component, which includes it using dangerouslySetInnerHTML as shown here. I am facing ...

javascriptnode.jsunit-testingreactjsmocha.js

A comprehensive guide to leveraging synchronous execution of setTimeout in JavaScript

Can the desired output shown below be obtained using setTimout? If it is possible, please provide your insight: console.log("1st"); setTimeout(() => { console.log("2nd"); },0); console.log("3rd"); The expected output should be: 1st 2nd 3rd ...

javascriptjsonasynchronousecmascript-6settimeout

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...

javascriptcssajax

Capture audio using Node.js

Our current setup utilizes Electron to capture the voices of both the speaker (the individual using the Electron application) and the counterpart (the person on the other end of the conversation). While we can easily use "Naudiodon" to record the speaker ...

javascriptnode.jsexpresselectron

Encountering an issue with the Laravel framework that lists available methods as: GET

I am encountering an issue while attempting to submit a form using ajax. The error message The POST method is not supported for this route. Supported methods: GET, HEAD. keeps appearing. Despite searching on platforms like Stackoverflow, no solution seems ...

javascriptajaxlaravellaravel-5

Broadcast live video on your website using VLC/Red5 or any other streaming platform of your choice

Currently, my home website is built using Java/SpringMVC web server. I am looking for a way to stream my webcam feed on my website so I can access it from any browser and see the live view of my room. If anyone has recommendations for an easy-to-use solut ...

javahtmlwebstreamingred5

Is there a way to integrate an onScroll event with iScroll4?

Unfortunately, the iScroll4 does not currently support the onScroll event as of now. Are there any known methods or workarounds to extend iScroll to incorporate the onScroll event? ...

javascriptjquerydom-eventsiscroll4