堆棧內存溢出
  簡體   English   中英

調整瀏覽器窗口大小時消失的內容

[英]Disappearing content when adjusting browser window size

 原文  2014-11-19 12:57:29  9   1    html/ css/ responsive-design

問題描述

我正在創建一個響應式網站。 當我將瀏覽器屏幕調整為小於480 px的大小時，內容（標題和文本）消失了。 菜單可見，更改為較小的菜單。

HTML 

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Erlend Van Landeghem</title>
<style type="text/css" media="screen">
@import "style.css";
</style>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="//use.typekit.net/dso8hgg.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

</head>

<body>
<div id="wrapper">

  <div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li><a href="">home</a></li>
      <li><a href="">biography</a></li>
      <li><a href="">sculptures</a></li>
      <li><a href="">drawings</a></li>
      <li><a href="">paintings</a></li>
      <li><a href="">installations</a></li>
      <li><a href="">studio</a></li>
      <li><a href="">info</a></li>
      <li><a href="">contact</a></li>
    </ul> 
  </div>
  <div id="container">
  <div id="header">Erlend Van Landegem <p id="kunstenaar">KUNSTENAAR</p></div>
    <div id="cwrap">
    <h1>HOME</h1>
    <h2>News</h2>
    <div id="nieuws"><p class="lopende">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue bibendum nisl ut accumsan. Phasellus interdum, ante a pellentesque accumsan, risus orci aliquet risus, sed feugiat dolor sapien sed nibh. Aliquam nunc tortor, dictum convallis tempus quis, cursus et diam. Aenean mollis posuere vehicula. Morbi rhoncus neque sed elementum tempus. Integer ultricies hendrerit porttitor. Donec ut urna non sem ornare consectetur.</p>

<p class="lopende">Cras nec lacus risus. Pellentesque quis egestas ligula, at posuere risus. Curabitur euismod facilisis dui, nec posuere nunc fringilla at. Duis eget neque nec sem posuere porta a aliquam magna. Donec aliquam urna eu ullamcorper convallis. Sed et metus volutpat, fermentum ex et, rutrum mi. Curabitur nunc ligula, faucibus in metus sit amet, sollicitudin interdum massa.</p>

<p class="lopende">Fusce dignissim, massa eu vestibulum sodales, nulla turpis sagittis purus, vel interdum sem nisl quis arcu. In hac habitasse platea dictumst. Morbi massa felis, rutrum eget mauris vel, bibendum eleifend lectus. Nam ac neque at arcu lobortis ornare. Curabitur ac interdum lorem. Cras sagittis viverra diam nec porta. Vivamus bibendum risus eu turpis efficitur fringilla. Curabitur laoreet vestibulum euismod. Mauris porttitor auctor efficitur. Mauris vel ultrices justo. Aliquam nec purus non nisl pharetra malesuada. In feugiat purus ante, non fermentum mauris efficitur varius.</p></div>


    </div>
  </div>
</div>
</body>
</html>

CSS 

@charset "UTF-8";
/* CSS Document */

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* tot zover de css reset! */

@font-face { /* declare fonts */
    font-family: "MuseoLight";
    src: url("fonts/Museo300-Regular.eot");
    src: local("Museo 300"), local("Museo-300"),  url("fonts/Museo300-Regular.woff") format("woff"),  url("fonts/Museo300-Regular.otf") format("opentype"),  url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
}
#menu {
    font-family: 'Special Elite';
    margin-top: 200px;
    font-size: 14px;
}
#navwrapper {
    width: 240px;
    left: -1px;
    background-color: #333333;
    height: 100%;
    position: fixed;
    float: left;
    text-align: left;
    box-shadow: 1px 0px 3px #888888;
}
#menu li {
    border-style: solid;
    border-bottom: 1px solid #484848;
}
#menu li a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 80px;
}
#menu li a:hover {
    background-color: #484848;
}
.show-menu {
    font-family: 'Special Elite';
    text-decoration: none;
    color: #fff;
    background: #333333;
    text-align: center;
    padding-top: 15px;
    display: none;
    font-size: 20px;
    background-color: #333333;
    height: 40px;
    border-style: solid;
    border-bottom: 1px solid #484848;
    margin-left: auto;
    margin-right: auto;
    width: 480px;
}
/*Hide checkbox*/
input[type=checkbox] {
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display: block;
}
#container {
    margin-left: 240px;
}
#header {
    font-family: 'Special Elite';
    padding-top: 40px;
    padding-bottom: 15px;
    font-size: 40px;
    background-color: #efeff0;
    color: #333333;
    padding-left: 35px;
}
#cwrap {
    padding-top: 35px;
    padding-left: 35px;
    width: 100%;
    max-width: 800px;
    display: inline-block;
}
h1 {
    font-family: 'Special Elite';
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 30px;
}
h2 {
    font-family: 'Special Elite';
    font-size: 16px;
    font-weight: 400;
    color: #9e9d9d;
    padding-bottom: 30px;
}
h2:after {
    content: ' ';
    display: block;
    border: 1px dotted #d0d0d0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
#kunstenaar {
    font-family: 'Museo';
    font-weight: 300;
    font-size: 23px;
}
.lopende {
    font-family: 'Museo';
    font-weight: 300;
    font-size: 0.9em;
    padding-bottom: 10px;
    display: inline-block;
    text-align: left;
}
#nieuws {
    width: 100%;
    display: inline-block;
}
body {
    font-size: 100%; /* flexible baseline */
}

@media only screen and (max-width : 480px) {
#navwrapper {
    width: 100%;
    left: -1px;
    text-align: center;
    background-color: #FFFFFF;
    max-width: 480px;
}
#menu {
    font-family: 'Special Elite';
    font-size: 18px;
    margin-top: 0px;
}
#menu li a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    background-color: #333333;
}
#menu li {
    border-style: solid;
    border-bottom: 1px solid #484848;
}
ul {
    position: static;
    display: none;
}
/*Create vertical spacing*/

    /*Make all menu links full width*/
ul li, li a {
    width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
    display: inline-block;
    width: 100%;
}
#container {
    margin-left: 0px;
    display: inline-block;
    width: 100%;
    max-width: 480px;
}
#cwrap {
    padding-top: 0px;
    padding-left: 0px;
    width: 100%;
    max-width: 480px;
    display: inline-block;
}
#header {
    display: block;
    width: 100%;
    padding-left: 0px;
}
}

任何幫助，將不勝感激！ 謝謝！

1 個解決方案

解決方案1
 1  2014-11-19 13:41:25

它並沒有消失，只是隱藏在#navwrapper后面！ 取消#navwrapper的background-color屬性（使用默認樣式和媒體查詢），您將看到自己的內容。 您可能需要重新考慮如何設置導航樣式！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 當我調整瀏覽器 window 的大小時，div 消失了 調整瀏覽器窗口大小時如何自動調整iframe內容大小？ 調整瀏覽器縮放大小 CSS：調整窗口大小時自動換行？ 響應式設計 調整窗口大小時，Div 不顯示為 4 列並縮小為 2 調整瀏覽器大小時，響應圖像的大小和div消失 內容更改時調整輸入類型文本的大小 Jumbotron無法根據屏幕/瀏覽器大小進行調整 最小化瀏覽器窗口時的div大小恆定 Div不會調整以調整瀏覽器窗口
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM