Question

所以我试图建立一个具有响应式网页设计的网站，因此调整页面大小或从手持设备访问网站，例如，调整元素并使其看起来干净整洁。

到目前为止，我有一个标题，导航，徽标，甚至还有一个视频登陆工作。我的问题是我有两个＆＃34;侧边栏＆＃34;这基本上是两个空的div，只是在主要内容的每一侧放置一个漂亮的20px宽条纹图案。

我知道要进行这些显示，我必须在CSS中设置所有内容，包括html, body和height:100%;，这样做效果很好，直到将内容放在中间内容＆＃34;内容＆＃34; div。

问题不在于他们不会显示，但如果浏览器窗口调整得足够小，我内容div中的文字就会溢出。当发生这种情况时，两个侧边栏不会跟随溢出，所以你得到这个漂亮干净的外观，直到你向下滚动到溢出并看到侧边栏停止，尽管文本仍在继续。

我还有一个<footer>，文字会溢出并继续经过页脚。

我在所有父元素中都尝试了min-height:100%;和height:auto;，但使用它们会移除height:100%，因此侧边栏会消失，或者不会生成任何内容这个问题的区别。

我不想overflow:scroll，我想这样做，所以div调整大小以容纳溢出，结果，将页脚向下推，侧边栏调整大小以覆盖整个页面。

简而言之，我需要将div设置为文档的100％，而不是100％的窗口。

我的HTML：

<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
</head>

<body>
<header>
<div class="logo" id="logo"></div>
<?php include("navigation.php"); ?>
</header>
<div id="login" class="login" style="display:none">
<div id="forms" class="forms">LOGIN FORM</div>
</div>
<div class="main">
<div class="sidebarleft"></div><div class="sidebarright"></div>
<div class="top">
<div class="navigationbox">
NAVIGATION TABLE
</div>
<div id="animation">
VIDEO PLAYER TABLE
</div>
</div>
<div id="content">
CONTENT GOES HERE, THIS IS THE CONTENT THAT IS OVERFLOWING
</div>
</body>
</html>

我的CSS：

@-ms-viewport {
    width: device-width;
}

body { 
    font-size: 1.05em;
    font-family: Tahoma;
    background: #4f0100;
    color: #fff;
    padding-top:121px;
    height:100%;
}

html {
    height:100%;
}

header {

    background:url('../images/HeaderPattern.png');
    background-repeat:repeat-x;
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

}

.login {
    background:url('../images/GreenPattern.png');
    background-repeat:repeat-x;
    width: 100%;
    height: 30px;
}

.forms {
    text-align: center;
    padding-top: 4px;
}

#logo{

    left: 0;
    padding-left: 50px;
    color:#edb27a;
    font-family:"Cornet";
    background: -webkit-linear-gradient(#f6d8b6 15%, #e48d40 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4em;
    height: 120px;
    margin-top: 10px;
    position:fixed;
    top:10px;

}

nav {

    float: right;
    right:0px;
    padding-right:25px;
    height:120px;
    top:40px;
    position:fixed; 

}

#menu-icon {

    display: hidden;
    width: 40px;
    height: 40px;
    background: #edb27a url(../images/menu-icon.png) center;

}

ul {

    list-style: none;

}

li {

    display: inline-block;
    float: left;
    padding: 10px

}

.main {
    width:85%;
    margin:0 auto;
    height:100%;
}

.content {
    text-align:center;
    padding-top:25px;
}

.sidebarleft {
    height:100%;
    width:20px;
    background-image:url('../images/SidebarLeft.png');
    background-repeat:repeat-y;
    float:left;
    position:relative;
    left:-40px
}

.sidebarright {
    height:100%;
    width:20px;
    background-image:url('../images/SidebarRight.png');
    background-repeat:repeat-y;
    float:right;
    position:relative;
    right:-40px
}

.top {
    position:relative;
    overflow:hidden;
    height:320px;
}

Answer 1

我删除了你的左/右小组。

见小提琴：https://jsfiddle.net/sg75uwmv/2/

.main {
    width:100%; min-height:100%;
    position:relative; 
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}
.center-col { 
    margin-left:20px; margin-right:20px;  
    background-color:#4f0100;     
}

这是div可以缩放以适合其内容的默认行为。所以我们必须确保我们不阻止它。直接在容器（.main）上尝试背景，然后将另一种背景颜色放入中心col。

调整窗口大小以调整div高度以适应溢出

1 个答案: