Fatal编程技术网
  • html/
  • Html 调整窗口大小以适应溢出时调整div高度

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

html css

Html 调整窗口大小以适应溢出时调整div高度,html,css,height,overflow,Html,Css,Height,Overflow,因此，我正在尝试制作一个具有响应性的网页设计的网站，例如，调整页面大小或通过手持设备访问网站，根据需要调整元素，使其外观美观、干净 到目前为止还不错，我有一个标题，导航，标志，甚至一个视频登陆工作。我的问题是我有两个“侧边栏”，它们基本上是两个空的div，只是在主要内容的每一侧放置了一个20像素宽的条纹图案 我知道要进行这些显示，我必须设置所有内容，包括html、body和高度：100% > 问题不是它们不会显示，而是如果浏览器窗口的大小调整得足够小，我的contentdiv中的文本将溢出。当

因此，我正在尝试制作一个具有响应性的网页设计的网站，例如，调整页面大小或通过手持设备访问网站，根据需要调整元素，使其外观美观、干净

到目前为止还不错，我有一个标题，导航，标志，甚至一个视频登陆工作。我的问题是我有两个“侧边栏”，它们基本上是两个空的
div
，只是在主要内容的每一侧放置了一个20像素宽的条纹图案

我知道要进行这些显示，我必须设置所有内容，包括
html、body
和
高度：100% div < /> > 

问题不是它们不会显示，而是如果浏览器窗口的大小调整得足够小，我的content
div
中的文本将溢出。当发生这种情况时，两个侧栏不会跟随溢出，因此您会得到这种非常干净的外观，直到您向下滚动到溢出，并看到侧栏停止，尽管文本仍在继续

我还有一个
，文本将溢出并继续在页脚上方

我试过
min身高：100%和<代码>高度：自动，但使用它们会删除
高度：100%
，因此侧栏会消失，或者不会对问题产生任何影响

我不想
溢出：滚动
，我想让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>



@-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;
}



我删除了你的左/右cols

看小提琴：


div的默认行为是缩放以适应其内容。所以我们必须确保我们不会阻止它。直接在容器（.main）上尝试背景，然后将另一种背景颜色放入中央列。
使用jquery通过添加div的高度来设置边栏的高度。例如，边栏高度=徽标高度+顶部高度+内容高度+页脚高度。这只是一个想法，我还没有测试过。嘿，雷，谢谢你的建议，但是我对jquery或任何javascript都不了解，所以我希望用纯CSS和HTML来实现这一点。你认为jquery是唯一的方法吗？我想不出一种使用纯CSS的方法，因为边栏取决于不同div的高度。边栏只是背景吗？是的，边栏是重复的20x20px背景。这是一个空div，我想从页面的顶部一直延伸到底部，不管发生什么情况，它包括任何溢出（如果发生）。哦，我不能将其设置为主体背景，因为当我试图创建一个响应性网页时，侧栏围绕的内容div会动态调整大小，因此在调整大小时，静态主体背景看起来不合适。除非我错过了一个技巧？珍妮弗，谢谢你的回答，不幸的是，问题仍然存在，当我将窗口的大小调整到足以使文本溢出时，div没有垂直缩放以允许条纹继续垂直覆盖整个页面。

.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;     
}