По какой-то причине мой нижний колонтитул не очень мобильный -- javascript поле с участием jquery поле с участием html поле с участием css пол Связанный проблема

For some reason, my footer isn't very mobile friendly


0
vote

проблема

русский

90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне.

То, как у меня есть его настройки В настоящее время именно так, как я хотел бы, чтобы это было установлено. Это то, что он выглядит на мобильном: Mobile View: Мобильный вид (можно увидеть верхнюю часть нижнего колонтитула)

 <Код> $(function() {    $('.navigation .nav-toggle').on('click', function() {      $('.wrapper').toggleClass('open');    });  });    $(function() {    $('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {      $('.navigation ul li').removeClass('active');      $(this).addClass('active');    });  });    $(function() {    $('.navigation ul li.home a').addClass('active');  });  
 <Код> body {    margin: 0;    padding: 0;    font-family: sans-serif;    align-items: center;    background: url("../images/bg.png") no-repeat;    background-size: cover;  }    html {    margin: 0;    padding: 0;    height: 100%;    min-height: 100%;  }    .navigation {    width: 100%;  }    .navigation ul {    overflow: hidden;    color: white;    padding: 0;    text-align: right;    margin: 0;    margin-right: 15px;  }    .navigation ul li {    padding: 17px 12px;    display: inline-block;  }    .navigation ul li a {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;  }    .navigation ul li a:hover {    color: #00D5C2;  }    .navigation ul li a {    text-decoration: none;    color: white;    font-size: 115%;    display: block;  }    .side-nav {    position: fixed;    width: 220px;    height: 150vh;    background-color: #2D2D2D;    transform: translateX(-100%);    transition: transform 0.4s ease;  }    .side-nav ul {    margin: 0;    padding: 0;    list-style: none;    z-index: 0;  }    .side-nav ul li {    border-bottom: 1px solid gray;    border-width: 100%;    margin: 5px;  }    .outerwrapper {    height: 100vh;    display: block;    overflow-x: hidden;    position: relative;  }    .wrapper {    height: 100vh;    display: block;    transform: translateX(-100);    transition: transform 0.6s ease;    min-height: 100%;    position: relative;  }    .wrapper.open {    transform: translateX(220px);    background-color: rgba(84, 84, 84, 0.6);  }    .side-nav ul li a {    padding: 10px;    display: block;    color: gray;    text-decoration: none;  }    .side-nav ul li a:hover {    color: white;    text-decoration: none;  }    .side-nav.open {    transform: translateX(0);  }    .navigation .nav-toggle {    display: none;    float: left;    padding: 20px 30px 20px 30px;    cursor: pointer;  }    .footer {    margin-top: -5em;    right: 0;    bottom: 0;    left: 0;    background-color: rgba(237, 237, 237, 0.2);    position: relative;    height: 70px;    z-index: -1;  }    .footerinfo {    margin-top: 20px;  }    .footerinfo p {    vertical-align: middle;    padding: 25px;    color: white;    text-align: center;    ;  }    .navigation ul li a.active {    color: #00F0DB;  }    #logo img {    max-width: 100%;    height: auto;    width: auto9;    display: block;    margin: 0 auto;  }    .footerlogo img {    margin-bottom: -65px;    margin-left: auto;    margin-right: auto;  }    .about-btn {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;    -webkit-transition: border-color 0.4s;    -moz-transition: border-color 0.4s;    -ms-transition: border-color 0.4s;    -o-transition: border-color 0.4s;    transition: border-color 0.4s;    font-size: 135%;    text-transform: uppercase;    text-decoration: none;    vertical-align: middle;    width: auto;    display: block;  }    .about-btn a {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;    -webkit-transition: border-color 0.4s;    -moz-transition: border-color 0.4s;    -ms-transition: border-color 0.4s;    -o-transition: border-color 0.4s;    transition: border-color 0.4s;    color: #3A9DA4;    border-radius: 9px;    padding: 10px 20px;    border: solid #3A9DA4 3px;    text-decoration: none;    font-size: 20px;    transition: all 0, 4s;  }    .about-btn li {    list-style-type: none;    margin: auto;    align-items: center;    width: 50%;    text-align: center;  }    .about-btn a:hover {    border-color: white;    color: white;    text-decoration: none;    font-size: 20px;    transition: scale(1, 1)  }    @media screen and (max-width: 700px) {    .navigation ul li {      display: none;    }    .navigation .nav-toggle {      display: inline;    }    .about-btn a {      font-size: 15px;    }  }  
 <Код> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="outerwrapper">    <div class="wrapper">      <div class="side-nav">        <ul>          <li><a href="#">Home</a></li>          <li><a href="#">About</a></li>          <li><a href="#">Repo</a></li>          <li><a href="#">Code</a></li>          <li class="pluginrequests"><a href="request">Request Plugin</a></li>        </ul>      </div>      <div class="navigation">        <ul>          <li class="nav-toggle">&#9776</li>          <li class="home"><a href="#">Home</a></li>          <li class="repo"><a href="#">Repo</a></li>          <li class="pluginrequests"><a href="request">Request Plugin</a></li>        </ul>      </div>      <div id="logo">        <img src="images/logo.png" alt="Squallz Logo">      </div>      <div class="about-btn">        <li><a href="about">About Me</a></li>      </div>    </div>    <div class="footer">      <div class="footerinfo">        <p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>      </div>    </div>  </div>  
Английский оригинал

90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.

The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile: mobile view (can see the top of the footer)

$(function() {    $('.navigation .nav-toggle').on('click', function() {      $('.wrapper').toggleClass('open');    });  });    $(function() {    $('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {      $('.navigation ul li').removeClass('active');      $(this).addClass('active');    });  });    $(function() {    $('.navigation ul li.home a').addClass('active');  });
body {    margin: 0;    padding: 0;    font-family: sans-serif;    align-items: center;    background: url("../images/bg.png") no-repeat;    background-size: cover;  }    html {    margin: 0;    padding: 0;    height: 100%;    min-height: 100%;  }    .navigation {    width: 100%;  }    .navigation ul {    overflow: hidden;    color: white;    padding: 0;    text-align: right;    margin: 0;    margin-right: 15px;  }    .navigation ul li {    padding: 17px 12px;    display: inline-block;  }    .navigation ul li a {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;  }    .navigation ul li a:hover {    color: #00D5C2;  }    .navigation ul li a {    text-decoration: none;    color: white;    font-size: 115%;    display: block;  }    .side-nav {    position: fixed;    width: 220px;    height: 150vh;    background-color: #2D2D2D;    transform: translateX(-100%);    transition: transform 0.4s ease;  }    .side-nav ul {    margin: 0;    padding: 0;    list-style: none;    z-index: 0;  }    .side-nav ul li {    border-bottom: 1px solid gray;    border-width: 100%;    margin: 5px;  }    .outerwrapper {    height: 100vh;    display: block;    overflow-x: hidden;    position: relative;  }    .wrapper {    height: 100vh;    display: block;    transform: translateX(-100);    transition: transform 0.6s ease;    min-height: 100%;    position: relative;  }    .wrapper.open {    transform: translateX(220px);    background-color: rgba(84, 84, 84, 0.6);  }    .side-nav ul li a {    padding: 10px;    display: block;    color: gray;    text-decoration: none;  }    .side-nav ul li a:hover {    color: white;    text-decoration: none;  }    .side-nav.open {    transform: translateX(0);  }    .navigation .nav-toggle {    display: none;    float: left;    padding: 20px 30px 20px 30px;    cursor: pointer;  }    .footer {    margin-top: -5em;    right: 0;    bottom: 0;    left: 0;    background-color: rgba(237, 237, 237, 0.2);    position: relative;    height: 70px;    z-index: -1;  }    .footerinfo {    margin-top: 20px;  }    .footerinfo p {    vertical-align: middle;    padding: 25px;    color: white;    text-align: center;    ;  }    .navigation ul li a.active {    color: #00F0DB;  }    #logo img {    max-width: 100%;    height: auto;    width: auto9;    display: block;    margin: 0 auto;  }    .footerlogo img {    margin-bottom: -65px;    margin-left: auto;    margin-right: auto;  }    .about-btn {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;    -webkit-transition: border-color 0.4s;    -moz-transition: border-color 0.4s;    -ms-transition: border-color 0.4s;    -o-transition: border-color 0.4s;    transition: border-color 0.4s;    font-size: 135%;    text-transform: uppercase;    text-decoration: none;    vertical-align: middle;    width: auto;    display: block;  }    .about-btn a {    -webkit-transition: color 0.4s;    -moz-transition: color 0.4s;    -ms-transition: color 0.4s;    -o-transition: color 0.4s;    transition: color 0.4s;    -webkit-transition: border-color 0.4s;    -moz-transition: border-color 0.4s;    -ms-transition: border-color 0.4s;    -o-transition: border-color 0.4s;    transition: border-color 0.4s;    color: #3A9DA4;    border-radius: 9px;    padding: 10px 20px;    border: solid #3A9DA4 3px;    text-decoration: none;    font-size: 20px;    transition: all 0, 4s;  }    .about-btn li {    list-style-type: none;    margin: auto;    align-items: center;    width: 50%;    text-align: center;  }    .about-btn a:hover {    border-color: white;    color: white;    text-decoration: none;    font-size: 20px;    transition: scale(1, 1)  }    @media screen and (max-width: 700px) {    .navigation ul li {      display: none;    }    .navigation .nav-toggle {      display: inline;    }    .about-btn a {      font-size: 15px;    }  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="outerwrapper">    <div class="wrapper">      <div class="side-nav">        <ul>          <li><a href="#">Home</a></li>          <li><a href="#">About</a></li>          <li><a href="#">Repo</a></li>          <li><a href="#">Code</a></li>          <li class="pluginrequests"><a href="request">Request Plugin</a></li>        </ul>      </div>      <div class="navigation">        <ul>          <li class="nav-toggle">&#9776</li>          <li class="home"><a href="#">Home</a></li>          <li class="repo"><a href="#">Repo</a></li>          <li class="pluginrequests"><a href="request">Request Plugin</a></li>        </ul>      </div>      <div id="logo">        <img src="images/logo.png" alt="Squallz Logo">      </div>      <div class="about-btn">        <li><a href="about">About Me</a></li>      </div>    </div>    <div class="footer">      <div class="footerinfo">        <p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>      </div>    </div>  </div>
</div
           

Список ответов

0
 
vote

Попробуйте добавить это в свои CSS и просмотреть еще раз в Mobilel

.OuterWrapper {
Высота: 100%! важно;
}

 

Try adding this in your css and view again in your mobileL

.outerwrapper {
height: 100%!important;
}

</div
 
 
 
 
0
 
vote

Вам нужно установить CSS класса нижнего колонтитула к:

 <Код> new1  
 

You need to set the css of the footer class to:

z-index: 999 !important;  position: fixed !important;   bottom:0 !important;   background-color: rgba(237, 237, 237, 0.2);   
</div
 
 
   
   

Связанный проблема

1  Расширение фона с помощью JavaScript  ( Extending a background using javascript ) 
У меня есть страница, которая выглядит так <код> ----------------------------------- | ************* | | ************* ...

1  Как я могу выбрать вторую кнопку Отмена, а не первым?  ( How can i select the second cancel button instead of the first ) 
Я хочу отменить второй элемент строки вместо первого. Ниже приведен какой-то пример код для 2 позиций: <код> <div class="screenlet-body"> <form na...

0  Обратный вызов для GridView Yii2 CheckboxColumn  ( Callback for yii2s gridview checkboxcolumn ) 
У меня есть <код> GridView (yii2) и один из столбцов - это логический тип данных. Я хочу быть в состоянии переключить это значение и сохранить его в моей баз...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

8  Предотвращение DOM XSS  ( Preventing dom xss ) 
Мы недавно мы на борту чужого кода, который с тех пор был проверен, и не удалось, для атаки DOM XSS. В основном фрагменты URL передаются непосредственно в сел...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

0  Есть ли способ определить проверенную переключатель перед отправкой формы?  ( Is there a way to determine checked radio button before form submission ) 
Я работаю над созданием динамической формы проверки полосы. Я хотел бы, чтобы форма изменилась на основе выбора радиопередачи. Вот код у меня есть до сих пор....

1  Передача нескольких массивов на график C3  ( Passing multiple arrays to c3 graph ) 
У меня есть API, давая мне несколько массивов, которые я должен поместить на диаграмме линии C3. Кажется, я умею построить просто хорошо, но если я начну прох...

0  Asp.net внутри тега скрипта  ( Asp net inside a script tag ) 
Я пытаюсь получить некоторую работу с некоторыми JavaScript, который делает график в зависимости от предоставленной вами информации. Я говорю о Это <код...

0  Как добавить значение для массива после проверки другого массива  ( How to add value to array after checking another array ) 
У меня есть два массива как таковые: <код> UserGroupUser[{Id:"1",UserId:"2",UserGroupId"1"}, {Id:"2",UserId:"3",UserGroupId"1"}, {Id:...

1  Путь нужна модуль в узле JS Работа в Windows, но не в Linux  ( Path of require module in node js work in windows but not in linux ) 
У меня это в моем коде <Код> var queries = require('./Queries.js'); При запуске сервера узла в Windows CMD в порядке. Я клонировать пролей в сервере Li...

0  JavaScript -Paste из буфера обмена к определенной ячейке в Excel  ( Javascript paste from clipboard to specific cell in excel ) 
У меня есть функция JS, которая копирует изображение от Div на буфер обмена (только в IE) и вставляет его в Excel. Я хотел бы знать, как я могу вставить содер...

3  OnleftClick & OnrightClick JavaScript Функции  ( Onleftclick onrightclick javascript functions ) 
В моем боковом коде сервера я динамически строим таблицу и именно сейчас я добавляю следующий код, чтобы обрабатывать Щелчок строки. <код> tr.Attributes.Add...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

0  Почему угловые $ не удаляют старое значение?  ( Why is angular scope not removing old value ) 
У меня есть следующий контроллер <код> angular.module('publicApp') .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeou...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.