我在移动设备上的页脚被页面截断
[英]My Footer on mobile gets cut off the page
问题描述
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Work Sans";
}
/* navigation styles start here */
.header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
@media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
.header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.left {
margin: 2rem;
font-family: 'Sora', sans-serif;
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
}
.footer {
width: 100vw;
display: block;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
background-color: #18181a;
}
.innerFooter {
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.innerFooter .logoContainer {
width: 35%;
float: left;
height: 100%;
display: block;
}
.innerFooter .footerThird {
padding-left: 20px;
width: calc(21.66666667 - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.innerFooter .footerThird:last-child {
margin-right: 0;
}
.innerFooter .footerThird h1{
font-family: 'Work Sans';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.innerFooter span {
font-family: 'Work Sans';
font-size: 12px;
color: white;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<body>
<div class="header">
<amp-img
src="https://i.imgur.com/vPr7fdQ.png"
width="175px"
height="50px"
></amp-img>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</div>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><span style="font-size: 46px;">Products</span></p>
<amp-carousel
layout="responsive"
type="slides"
height="720"
width="1280"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="https://i.imgur.com/VjNbHoD.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/CFw62Qo.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/DSFCYpd.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/i2gLNZD.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/wxkmAop.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/x1s8gJs.png"
width="1280"
height="720"
></amp-img>
</amp-carousel>
<p style="text-align: center;"><span style="font-size: 46px;">Manufacturers</span></p>
<p style="text-align: center;"><br></p>
<table style="width: 100%; border-collapse: collapse; margin: 0px auto; border: groove;">
<tbody>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><strong>Manufacturers</strong></div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><strong>Website</strong></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Sia Abrasives</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="https://www.siaabrasives.com/us/en/home/">https://www.siaabrasives.com/us/en/home/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Time Savers</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.timesaversinc.com/content/wood-sanders">http://www.timesaversinc.com/content/wood-sanders</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">AirVANTAGE Tools</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.airvantagetools.com/">http://www.airvantagetools.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Coilhose Pneumatics</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.coilhose.com/">http://www.coilhose.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">EAB Tools</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.exchangeablade.com/">http://www.exchangeablade.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Flex Trim Abrasives</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.flex-trim.com/">http://www.flex-trim.com/</a></div>
</td>
</tr>
<tr>
<td style="width: 50%; border: groove;">
<div style="text-align: center;">Larick Machinery</div>
</td>
<td style="width: 50%; border: groove;">
<div style="text-align: center;"><a href="http://www.larickmachinery.com/">http://www.larickmachinery.com/</a></div>
</td>
</tr>
</tbody>
</table>
<div class="footer">
<div class="innerFooter">
<div class="logoContainer">
<amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
</div>
<div class="footerThird">
<h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
<h1>Phone Number: (714) 287-6815 </h1>
</div>
<div class="footerThird">
<span>Copyright 2020 Reliant Industrial Supply<span>
</div>
</div>
</div>
</body>
</html>
As the title refers, my footer when less than 768px vw width(mobile), The footer just runs off the edge and I've tried changing the padding between the image and the text and it does not change.
正如标题所指，我的页脚小于 768px vw 宽度（移动）时，页脚刚刚超出边缘，我尝试更改图像和文本之间的填充，但它没有改变。 I know this script is huge but it is kind of need to show what the footer would look like, if you don't mind putting this into a editor.我知道这个脚本很大，但是如果您不介意将其放入编辑器中，则需要显示页脚的外观。 It would be greatly appreciated if you could help me out!如果您能帮助我，将不胜感激！
1 个解决方案
解决方案1
1 已采纳 2020-07-19 01:44:41
The easiest thing you can do is apply display: flex to the .footer class.您可以做的最简单的事情是将display: flex应用于.footer class。
Also, you should look into ways of doing that table without actually using tables.此外，您应该研究在不实际使用表格的情况下制作该表格的方法。 That would give the table a much better responsive look and feel.这将使表格具有更好的响应外观和感觉。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
页脚被切断？ - Footer gets cut off?
页面在桌面上工作，但 header 在移动设备上被切断 - Page works on desktop, but the header gets cut off on mobile devices
固定页脚水平切断 - Fixed footer gets cut off horizontally
网页被截断 - Web Page gets cut off
在移动设备上显示的页面已截断 - Page displayed cut off in mobile
固定头在手机上被切断 - Fixed header gets cut off on mobile phones
当我水平滚动时，绝对定位的页脚会被切除 - When I scroll horizontally my absolutely positioned footer gets cut off
页面底部在 Safari 中被截断 - Bottom of page gets cut off in Safari
当浏览器缩小时，iFrame页脚被切断 - iFrame Footer gets cut off when browser shrinks
在手机上查看网站时，Footer的背景被截断 - Footer's background gets cut off when viewing the site on mobiles
相关标签