GVKun编程网logo

html – 滚动单元格在100％高度表中（html 表格 滚动条）

17

最近很多小伙伴都在问html–滚动单元格在100％高度表中和html表格滚动条这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展css–Div100％高度滚动、css–DIV–100

最近很多小伙伴都在问html – 滚动单元格在100％高度表中和html 表格 滚动条这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展css – Div 100％高度滚动、css – DIV – 100％高度导致滚动条、css – 为什么我使我的div 100％高度,如果我使用HTML5的doctype？如何获得100％的高度、css – 使用HTML的2列100％高度等相关知识，下面开始了哦！

本文目录一览：

html – 滚动单元格在100％高度表中（html 表格 滚动条）

html – 滚动单元格在100％高度表中（html 表格 滚动条）

如果这已经得到了回答,我很抱歉,但是搜索“100％身高”的东西有点困难.

我的问题是我需要100％高度的表格布局,因为浏览器自动调整大小,我不想因为显而易见的原因而自行编写脚本.

它不同于其他“100％问题”,因为我需要一些细胞粘在顶部,一些细胞粘在底部,并通过浏览器调整中间值以填充剩余空间.

那种工作,问题发生在我需要中间部分来包含溢出的东西,显然我想要溢出：自动在那里启用用户通过那些东西.它适用于WebKit,在Firefox中,它没有,其他没有经过测试.这是测试用例.

<html>
<head>
    <style>

        body,html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            overflow: auto;
            height: 100%;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                <div>
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object,and can be accessed in JavaScript as expected
                </div>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

解决方法

我刚才回答了这样的问题,我相信你正在寻找同样的事情,here就是问题本身和我的答案：

HTML

<div>
    <div>
        fixed height 20
    </div>
    <div>
        fixed height 50
    </div>
    <div>
        fixed height 100
    </div>
    <div>
        <div>
            ....
        </div>
    </div>
    <divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty,.fifty,.hundred,.auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-Box-sizing:border-Box;
    -moz-Box-sizing:border-Box;
    -ms-Box-sizing:border-Box;
    Box-sizing:border-Box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

全景：http://jsfiddle.net/8abeU/show/
小提琴：http://jsfiddle.net/8abeU

css – Div 100％高度滚动

css – Div 100％高度滚动

在我的页面上,我有一个导航栏,左边是100％的高度和25％的宽度.
它工作正常,但是当有滚动可用时,它会破坏背景,并使其看起来很丑.我认为的原因是100％的高度只适用于活动窗口.
即使用户正在滚动,总是具有100％高度div的技巧是什么？

导航的CSS：

width:25%;
    height:100%;
    float:left;
    color:#999999;

我已经尝试了位置：绝对没有结果,也试图清除两者.
需要帮忙 ：)

Fiddle

解决方法

使用最小高度：100％而不是高度：100％应该修复它.看到更新的小提琴在这里： http://jsfiddle.net/zitrusfrisch/Sa6cb/3/

css – DIV – 100％高度导致滚动条

css – DIV – 100％高度导致滚动条

当高度设置为100％时,我遇到了导致滚动条的div的问题.

现在,我的页面内容看起来像;

<body>  

<hr>

<div id="content">

    <div id="heading">

    </div>

</div>


</body>

问题是HR是5px,内容是身高的100％.所以,因为它是页面高度的100％,所以它低于HR并创建5px,因此我想要避免使用滚动条.

我的问题是,如果不认为它需要100％页面高度并且不包括页面高度中的HR,我如何使它高度100％？

谢谢.

解决方法

这种布局最好使用绝对定位来完成.以下是使用HTML： http://jsfiddle.net/7KGmZ/的示例

CSS：

#content
{
    position: absolute;
    top: 20px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}​

css – 为什么我使我的div 100％高度,如果我使用HTML5的doctype？如何获得100％的高度

css – 为什么我使我的div 100％高度,如果我使用HTML5的doctype？如何获得100％的高度

我正在努力得到布局排序的一个漂亮的简单的画廊webapp，但是当我使用HTML5的doctype声明，我的一些div(100％)的高度正在缩小，我似乎不会丰满他们使用CSS备份。

我的HTML是在https://dl.dropbox.com/u/16178847/eyewitness/b/index.html和CSS是在https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

>如果我删除HTML5的doctype声明，一切都是我想要的，
但我真的想使用正确的HTML5 doctype声明。
>如果我将doctype设置为HTML5并且不做任何更改，带有照片和页脚div的div不可见，可能是因为它们的高度为0px。
>如果我将doctype设置为HTML5，并使body {height：100px}和.container {height：100px}或.container {height：100％}，它变得可见，但我需要的是它的全高而不是以像素为单位的高度。
>如果我尝试做同样的，但与body {height：100％}的照片和页脚divs不再可见。

我需要做什么来获得100％的高度，使我的照片和页脚div是全高？

解决方法

只有父元素具有定义的高度，而不是auto的值。如果它具有100％的高度，也必须定义父的父高度。这可以直到html根元素。

因此，将html和body元素的高度设置为100％，以及该元素的每个祖先元素，您希望首先具有100％的高度。

css – 使用HTML的2列100％高度

css – 使用HTML的2列100％高度

我在绝望中试图画出这个简单的东西.两列垂直拉伸100％.这有可能吗？

这里有两次尝试

<html>
<head>
<title>Columns</title>
</head>
<body>
<style type="text/css">
.wrapper {font-size:900px;
width:1200px;
margin:0 auto;
}
.col1 {
width:600px;
height:100%;
float:left;
background:#f00;
}
.col2 {
width:600px;
height:100%;
float:left;
background:#00f;
}
</style>
<div>
<div> C o l u m n 1 </div>
<div> C ol u m n 2 </div>
</div>
</body>
</html>

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <title>2 Column CSS Demo - Equal Height Columns with Cross-browser CSS</title>

    <style media="screen" type="text/css">
/* <!-- */
*{
    margin:0;
    padding:0;
}

   html { 
    background-color: #ccc; 
        height: 100%; 
   } 
   body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
   }  

#footer {
    clear:both;
    width:100%;
    height:0px;font-size:0px;
}


#container2 {


    clear:left;
    float:left;
    width:600px;
        overflow:hidden;
    background:#ffa7a7;  
}



#container1 {

    float:left;
    width:600px;
    position:relative;
    right:200px;
    background:#fff689;  
}
#col1 {
    float:left;
    width:400px;
    position:relative;
    left:200px;
        overflow:hidden;
}
#col2 {
    float:left;
    width:200px;
    position:relative;
    left:200px;
        overflow:hidden;
}
/* --> */
    </style>
</head>
<body>

<div id="container2">
    <div id="container1">
        <div id="col1">
            aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a  a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a
        </div>
        <div id="col2">

            fghdfghsfgddn   fghdfghsfgddn    fghdfghsfgddn  fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn v
        </div>
    </div>
</div>
<div id="footer">
     &nbsp;
</div>
</body>

多一个

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<title>Test Layout</title>
<Meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<Meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
/*primary positional elements */
html,body{ height:100%; font-family:Arial,Helvetica,sans-serif;}
body {margin:0; padding:0; background:url(../images/top_grid.gif) repeat-x top right; font-size:small; }

#wrapper{position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%; width:998px;}
html>body #wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

#header{ position:absolute; margin:0; left:50%; margin-left:-499px;width:1000px;height:140px; background:url(../images/header.gif); background-color:#00FF66;z-index:99;}
#header a{display:block; position:absolute; top:40px; left:20px; height:80px; width:400px;}
#header a span{display:none;}

#main{ position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%;width:1000px;padding:0;background:url(../images/background.gif) no-repeat top left yellow; z-index:1; border-left:1px solid #82A4E1; border-right:1px solid #82A4E1;}
html>body #main{height:auto; width:998px;} /*for mozilla as IE treats height as min-height anyway and to fix IE Box model error*/

#left_col,#right_col{ position:absolute; margin:0; top:0; padding:0; height:100%; width:212px;border-left:1px solid #82A4E1; border-right:1px solid #82A4E1; z-index:3; background:url(../images/left_side_gradient.gif) repeat-x bottom right #ACB5E7;
}

#left_col{ left:20px;}
#right_col{ right:20px }
/*IE Box model fix */
html>body #right_col{ width:210px; }
html>body #left_col{ width:210px; }
#left_col #menu{margin-top:195px;}

.col_top{ position:absolute; top:140px; left:-1px;background-image:url(../images/column_tops.gif);height:45px; width:212px;}
.clear_header{ height:155px; }
.menu_clear{ height:195px; }

#content{ padding:0 250px; height:100%; z-index:2; }

/* Announcments section */
#announcements{ text-align:right; }
#announcements ul{list-style-type:none; padding:0; margin:0;}
#announcements li{ padding:5px 15px 5px 15px;}
#announcements li a{ color:#1B3AA9;}
#announcements li a:hover{font-weight:bold; padding-left:-13px;}
#announcements h1{ font-size:18px; margin:0; padding:5px 15px 0 15px;}

.date{ display:block; font-weight:bolder;}
.column_img img{ border-bottom:1px solid white; border-top:1px solid white; }
#content h1{margin:.25em 0;}
#content p{margin:0 0 1em 0;}

/* nav block elements */
#nav {}
#nav,#nav ul { margin: 0; padding: 0; list-style: none; }
#nav ul { border-bottom:1px solid #fff; border-top:1px solid #737AD7}
#nav { margin-bottom: 1em; }
#nav li { display: inline; padding: 0; margin: 0; }

#nav li span {
display: block;
padding: 6px 10px;
font-weight: bold;
color: #666;
}

#nav li span#configParent,#nav li span #configuration {
display: inline;
font-weight: normal;
padding: 0;
}

#nav li a {
display: block;
padding: 8px 10px;
text-decoration: none;
border-bottom: 1px solid #737AD7;
border-top: 1px solid #fff;
font-weight:bold;
color:#1B3AA9;
}

#nav li a:hover {
background: #EBF1FF;
color:black;
}

#nav li li a {
padding: 3px 8px 3px 20px;
border:0;

}

#nav li ul{
border-bottom: 1px solid #737AD7;
border-top: 1px solid #fff;
}

#nav li li li a {
padding: 2px 8px 2px 40px;
border:0;
font-weight:normal;

font-size:90%;
}

#nav li li ul{
background:0;
border:0;
}

#nav .selected{
text-decoration:none;
background-color: #E0E2F7;
}
#nav .selected:hover {
text-decoration:underline;
}

#nav li li .selected{
text-decoration:underline;
background:0;
}
</style></head>

<body>
<div id="main">
<div id="left_col">
<div></div>

<div></div>
<div id="nav">
<ul>
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><ahref="">Active Item</a>
<ul>
<li><a href="">Submenu Item</a></li>
<li><ahref="">Active Item</a>

<ul>
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 2</a></li>
</ul></li>
<li><a href="">Submenu Item 2</a></li>
</ul>
</li>
<li><a href="">Menu Item 3</a></li>
</ul>

</div>
</div>

<div id="right_col">
<div></div>
<div></div>
<div>
<img src="images/pictures/students.jpg" alt="Students working" />
</div>
<div id="announcements">
<h1>Announcements</h1>
<ul>
<li><span>Jan. 31 2005</span><a href="">Nam liber tempor cum </a></li>
<li><span>Jan. 31 2005</span><a href="">Workshop Announcement</a></li>

<li><span>Jan. 31 2005</span><a href="">soluta nobis eleifend option congue nihil imperdiet</a></li>
<li><span>Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li>
<li><span>Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li>
</ul>
</div>
</div>

<div id="content">
<div></div>

<h1>Welcome to the New Website</h1>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt SAEpius. Claritas est etiam processus dynamicus,qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,quam nunc putamus parum claram,anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,qui nunc nobis videntur parum clari,fiant sollemnes in futurum.</p>

</div>
</div>
<div id="header"><a href="http://www.#*$!xxxxxxx.org/"><span>Home</span></a></div>
</body></html>

当内容太大而不适合浏览器窗口时,第三个不起作用.尝试使窗口变小并向下滚动

解决方法

您正在寻找的是所谓的“圣杯”专栏布局.例如,Matthew James Taylor开发了一套强大的设备,包括 The Perfect ‘Double Page’ 2 Column Liquid Layout (Percentage widths),它应该(可能有一些调整)满足您的要求.

关于html – 滚动单元格在100％高度表中和html 表格 滚动条的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于css – Div 100％高度滚动、css – DIV – 100％高度导致滚动条、css – 为什么我使我的div 100％高度,如果我使用HTML5的doctype？如何获得100％的高度、css – 使用HTML的2列100％高度等相关内容，可以在本站寻找。

本文标签：

上一篇适当的HTML标记和身份验证流程是否与密码管理器兼容？（html怎么设置用户和密码）

下一篇html – 没有标题的nav元素 – 文档大纲（html可以没有title吗）

相关文章