Question

我正试图在移动版面中缩小内容，但我无法隐藏标题下的内容：

enter image description here

我想要的是：

enter image description here

我现在的代码是： HTML：

<body>
    <div id="container">
        <div id="wrapper">
            <header>
                <h1>Website Example</h1>
            </header>

            <div id="content">
                <figure class="home-image">
                    <img class="centered" src="images/home-image.jpg" />
                </figure>

                <article>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </article>
            </div><!-- end content -->

        </div><!-- end wrapper -->
    </div><!-- end container -->
</body>

CSS：

html {
    /* Prevents iPhone from resizing in landscape mode */
    -webkit-text-size-adjust: none;        
}

* { 
    /* Apply a natural box layout model to all elements */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    text-decoration: none;
}


/* BODY */
body {
    font-size: 16px;                        /* Default size based on mobile */
    font-family: 'Open Sans', sans-serif;
    background-color: #1f253d;
}


/* CONTAINER */
#container {
    min-width: 320px;
    max-width: 600px;
}

/* CONTAINER */
#wrapper {
    width: 95%;
    margin: 10px auto;
}

/* HEADER */
header {
    background-color: #394264;
    position: fixed;
    width: 95%;
    opacity: .9;
}

header h1 {
    text-align: center;
    opacity: .9;
    line-height: 2em;
    color: #fff;
    font-size: .8em;
}


/* CONTENT */
#content {
    width: 100%;   
    margin: auto;
}

#content article {
    margin-top: 10px;
    background: #394264;
    color: #FFF;
    font-size: 0.85em;
    line-height: 1.6em;
    padding: 1em;
    border-bottom: 1px solid #1F253D;
}

/* IMAGES */
figure {
    width: 100%;
}

figure img {
    max-width: 100%;
    border-bottom: 1px solid #394264;
}

figure img.centered {
    display: block;
    margin: 0 auto;
}

知道如何隐藏标题下的内容吗？

此外，滚动条也不可见。

感谢。

Answer 1

尝试保持HTML免费，您已经将最小宽度和最大宽度应用于容器，请不要这样做，您正在限制HTML。保持简单。

我想这就是你想要的。请检查以下代码：

此处有更新 fiddle

<强> CSS

    html {
    /* Prevents iPhone from resizing in landscape mode */
    -webkit-text-size-adjust: none;        
}

* { 
    /* Apply a natural box layout model to all elements */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    text-decoration: none;
    margin:0;padding:0;
}


/* BODY */
body {
    font-size: 16px;                        /* Default size based on mobile */
    font-family: 'Open Sans', sans-serif;
    background-color: #1f253d;
    position:relative;    
}

/* CONTAINER */
#wrapper {position:absolute;}

/* HEADER */
header {
    background-color: #394264;
    position: fixed;
    top:20px;
    width:100%;
    opacity: .9;
}

header h1 {
    text-align: center;
    opacity: .9;
    line-height: 2em;
    color: #fff;
    font-size: .8em;
}

::-webkit-scrollbar{display: none;}

/* CONTENT */
#content{height:300px;overflow-x:hidden;position:relative;top:95px;}
#content article {
    margin-top: 10px;
    background: #394264;
    color: #FFF;
    font-size: 0.85em;
    line-height: 1.6em;
    padding: 1em;
    border-bottom: 1px solid #1F253D;
}

/* IMAGES */
figure {
    width: 100%;
}

figure img {
    max-width: 100%;
    border-bottom: 1px solid #394264;
}

figure img.centered {
    display: block;
    margin: 0 auto;
}

Answer 2

您必须将此添加到css

中的标题中

top: 0;

标题css是这样的：

header {
    background-color: #394264;
    position: fixed;
    width: 95%;
    opacity: .9;
    top: 0;
}

小提琴：http://jsfiddle.net/KyZC5/

这是因为position：fixed会自动将元素设置为中心，因此您必须定义要放置元素的位置，在本例中位于页面顶部，这就是为什么top：0;

在移动设备中向下滚动时无法隐藏内容

2 个答案: