Question

应用程序最初将从页脚中的2个按钮开始根据用户与应用程序的交互，可能需要插入/显示第三个按钮。之后可能需要隐藏/删除它，具体取决于应用程序其他部分的一些用户选择。

按钮文本应在每个按钮内水平居中，并且按钮需要完全覆盖页脚，除了间距的微小垂直分割。
我的代码中的页脚在右侧有一个不需要的空白区域。

解决这个问题的最佳方法是什么？希望尽可能多地使用css，其余的使用javaScript“我猜一猜”。感谢

* {
    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. 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>
</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 1

这是你想要的吗？

＆＃13;

* {
    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;
}

＆＃13;

<!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. 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>
</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>

＆＃13;

Answer 2

如果您的意思是希望所有三个按钮占用相同的空间，那么这将适合您：

[yourInstance authorize:^(BOOL result) {
    //user result here.
}];

按钮宽度填充窗口宽度

2 个答案: