页面CSS宽度大于100％

问题描述 投票：0回答：1

我目前正在研究一个小的SCSS框架，可以在这里查看：http://framework.pixxelone.de/但是，我在所有设备上的标头的最大宽度有一些问题，这会导致问题。如果在iPhone上打开它，则可以向右滚动，这是不可能的。在iPad视口（在Chrome中模拟，我没有）上，标题的视口也不正确。菜单被切掉，右侧的主要内容也被切掉。

[在Chrome中没有设备专用的视口，您也可以向右滚动（尽管它在视口中正确显示）。我很确定它必须对标题或标题中的元素（特别是主菜单）进行某些操作，但是我不知道该怎么做才能解决此问题。

我发现了一些类似的帖子，这些帖子通过添加box-sizing来解决：border-box;但这对这里没有帮助。我也找不到任何大于其宽度的元素。

iPhone viewport

iPad Viewport

"use strict";

window.addEventListener("load", function() {

    let hamburgerMenu = document.getElementById("hamburger-menu");

    hamburgerMenu.addEventListener("click", function () { // Event bei Klick hinzufügen
        hamburgerMenu.classList.toggle("is-active"); // is active ändert den Hamburger zu einem X

        let navigation = document.getElementById("navigation");
        navigation.classList.toggle("hamburger-toggle-nav-display-block"); // bei Klick Klasse hinzufügen und damit anzeigen, bei erneuten Klick Klasse entfernen und damit ausblenden
        hamburgerMenu.classList.toggle("z-index-9999");

    }, false);

}, false);
// VARIABLES
// Navigation top
$navigation-top-background: $color-initial;
$navigation-top-border-bottom: 0.4rem solid $color-primary;

$navigation-top-a-color: $standard-font-color;
$navigation-top-a-color-hover: $color-primary;
$navigation-top-a-color-active: $color-primary;
$navigation-top-a-transition: $transition-time;

$navigation-top-nav-padding: 2.0rem;

// Variablen zur Berechnung der Höhe des Headers, um dann automatisch den margin für den main content zu bekommen
$logo-height: 4.0rem;
$logo-width: 20.0rem;
$header-height: 8.0rem;

// mobile nav Ausklappmenu
$navigation-top-ausklappmenu-padding: 2.0rem;
$navigation-top-ausklappmenu-background: $color-initial;
$navigation-top-ausklappmenu-box-shadow: 0.3rem 0.3rem 0.5rem rgba(0,0,0,0.2);
$navigation-top-ausklappmenu-right: 2.0rem;
$navigation-top-ausklappmenu-top: 6.0rem;
$navigation-top-ausklappmenu-width: 80%;
$navigation-top-ausklappmenu-max-width: 40rem;


// Navigation top Hamburger
$hamburger-padding-x           : 15px !default;
$hamburger-padding-y           : 15px !default;
$hamburger-layer-width         : 40px !default;
$hamburger-layer-height        : 4px !default;
$hamburger-layer-spacing       : 6px !default;
$hamburger-layer-border-radius : 4px !default;

// Colours
$hamburger-layer-color         : black !default;

$hamburger-hover-layer-color   : $color-primary !default;
$hamburger-hover-opacity       : 1.0 !default;

$hamburger-active-layer-color  : $color-primary !default;
$hamburger-active-hover-opacity: 1.0 !default;
$hamburger-active-label-color  : $color-primary !default;


$hamburger-label-color         : black !default;
$hamburger-label-color-hover   : black !default;
$hamburger-label-color-active  : $color-primary !default;



// GENERAL NAVIGATION TOP
header {
	background: $navigation-top-background;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: $navigation-top-border-bottom;
	z-index: 100;

	#logo {
		margin-left: $grid-container-padding-left-right-smartphone;
		margin-top: ($header-height - $logo-height) / 2;
		margin-bottom: ($header-height - $logo-height) / 2;
		float: left;
		width: $logo-width;
		height: $logo-height;
		background: url() no-repeat center; // link in html
		background-size: contain;
		display: block;
	}

	nav {
		display: none; // mobile
		float: right;
		padding: 0;

		&:hover ul {
			display: block;
		}

		ul,
		&:active ul {
			position: absolute;
			padding: $navigation-top-ausklappmenu-padding;
			background: $navigation-top-ausklappmenu-background;
			box-shadow: $navigation-top-ausklappmenu-box-shadow;
			right: $navigation-top-ausklappmenu-right;
			top: $navigation-top-ausklappmenu-top;
			width: $navigation-top-ausklappmenu-width;
			max-width: $navigation-top-ausklappmenu-max-width;
			margin: 0;
			list-style: none;
		}

		ul li {
			display: inline-block !important;
			text-align: center;
			width: 100%;
			padding: 1.0rem 0;
			margin: 0;

			& a {
				color: $navigation-top-a-color;

				&:hover {
					color: $navigation-top-a-color-hover;
					transition: $navigation-top-a-transition;
				}

				&:active {
					color: $navigation-top-a-color-active;
				}
			}
		}
	}
}


@media all and (min-width: $tablets-landscape-and-bigger) {
	header {
		position: fixed;

		#logo {
			margin-left: $grid-container-padding-left-right-desktop;
		}

		nav {
			ul,
			&:active ul {
				display: inline-block;
				//height: $header-height;
				padding: 0;
				border: 0 solid $color-initial;
				top: 0;
				width: auto;
				max-width: 1024px;
				background-color: rgba(0, 0, 0, 0);
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // remove shadow
			}

			ul li {
				display: block;
				text-align: right;
				line-height: $header-height;
				width: auto;
				padding: 0 1.0rem;
				margin: 0;
				display: block;
			}
		}
	}
}





// HAMBURGER ICON
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */


// Types
// ==================================================
$hamburger-types: (
  collapse
) !default;

// Base Hamburger
// ==================================================

button#hamburger-menu:hover, button#hamburger-menu:focus {
  background-color: rgba(0,0,0,0);
  color: black;
}


.hamburger {
  position: absolute;
  right: $grid-container-padding-left-right-smartphone;
  top: (($header-height - 3.8rem) / 2) ; // 3.8rem = height vom kompletten hamburger
  // padding: $hamburger-padding-y $hamburger-padding-x;
  padding: 0;
  display: inline-block;
  cursor: pointer;

  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;

  // Normalize (<button>)
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;

  .hamburger-label {
    display: block;
    vertical-align: top;
    color: $hamburger-label-color;
    font-weight: 600;
    display: inline-block;
    margin-left: 5px;
    height: 24px;
    text-transform: uppercase;
  }

  &:focus {
    outline: none;
  }

  &:hover {
    opacity: $hamburger-hover-opacity;

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
      background-color: $hamburger-hover-layer-color;
    }

    .hamburger-label {
        color: $color-primary;
    }
  }

  &.is-active {
    &:hover {
      opacity: $hamburger-active-hover-opacity;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
      background-color: $hamburger-active-layer-color;
    }

    .hamburger-label {
      color: $hamburger-label-color-active;
    }
  }
}

.hamburger-box {
  width: $hamburger-layer-width;
  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: $hamburger-layer-height / -2;

  &,
  &::before,
  &::after {
    width: $hamburger-layer-width;
    height: $hamburger-layer-height;
    background-color: $hamburger-layer-color;
    border-radius: $hamburger-layer-border-radius;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }

  &::before,
  &::after {
    content: "";
    display: block;
  }

  &::before {
    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
  }

  &::after {
    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
  }
}


.hamburger-toggle-nav-display-none {
  display: none;
}
.hamburger-toggle-nav-display-block {
  display: block !important;
  transition-duration: 0.15s;
}

#navigation {
  position: absolute;
  z-index: 9998;
  width: 100%;

  ul {
    display: inline-block;
  }
}

.z-index-9999 {
  z-index: 9999;
}



@media all and (min-width: $tablets-landscape-and-bigger) {
  .hamburger {
    display: none;
  }

  #navigation {
    display: block; // nav wieder anzeigen
  }
}


// Collapse Animation
// ==================================================
@if index($hamburger-types, collapse) {
  .hamburger--collapse {
    .hamburger-inner {
      top: auto;
      bottom: 0;
      transition-duration: 0.13s;
      transition-delay: 0.13s;
      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

      &::after {
        top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
        transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
                    opacity 0.1s linear;
      }

      &::before {
        transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
                    transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
    }

    &.is-active {
      .hamburger-inner {
        transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
        transition-delay: 0.22s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        &::after {
          top: 0;
          opacity: 0;
          transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
                      opacity 0.1s 0.22s linear;
        }

        &::before {
          top: 0;
          transform: rotate(-90deg);
          transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
                      transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
      }
    }
  }
}
<header>
			<a href="#" id="logo" style="background: url(img/testlogo.svg) no-repeat center;"></a>
			<nav id="navigation">
				<ul>
					<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
					<li><a href="#"><i class="far fa-user"></i> About</a></li>
					<li><a href="#"><i class="fas fa-briefcase"></i> Work</a></li>
					<li><a href="#"><i class="fas fa-rss"></i> Blog</a></li>
					<li><a href="#"><i class="far fa-envelope"></i> Contact</a></li>
				</ul>
			</nav>
			<button class="hamburger hamburger--collapse" type="button" id="hamburger-menu">
				<span class="hamburger-box">
					<span class="hamburger-inner"></span>
				</span>
				<span class="hamburger-label">Menü</span>
			</button>
		</header>
html css ios width viewport
1个回答
0
投票

您的问题似乎出在.row，如果您在CSS中签入，宽度设置为width: calc(100% + 2.0rem);。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.