Question

是的，我已经看过几十个关于100％div的问题。但我仍然无法实现它。因为我在正确的div上使用负余量。

如果我从螺旋类中移除高度键，则不会出现金属螺旋。请有人帮帮我我只想让螺旋与内容一起出现。

我可以使用javascript但不是每个人都启用了javascript。

由于我将在问题解决后删除测试页面，因此以下是其他人的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>TEST</title>

<style type="text/css">
.wrapper{
margin: 0px auto; 
background-color: white;
border: 1px solid #CCC;
width: 1030px;
}

body{
background-color: #f3f0e6;
height: 100%;
margin-top: 30px;
}

.content{
float: left;
width: 960px;
padding: 15px;
}

.spiral { 
float: right;
margin-right: -32px;

width:63px; 
height: 500px;

background-image:url(images/home/spiral.jpeg);
background-repeat:repeat-y;
background-position:top left;
}

.clear{clear: both;}
</style>


</head>
<body>

    <div class="wrapper">
        <div class="spiral"></div><!-- END SPIRAL -->
        <div class="content">

        [HEADER]</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br> [FOOTER]

        </div><!-- END CONTENT -->
        <div class="clear"/>
    </div><!-- END WRAPPER -->



</body>
</html>

Answer 1

您正在寻找display: table-cell;。看到这个小提琴：http://jsfiddle.net/RZBAg/

（HTML标记稍有变化，因为螺旋在内容后出现。我还添加了一个红色背景来说明螺旋div的大小。）

Answer 2

根据我的评论，这是一个答案。

jsfiddle.net/kxwgJ/1

我只是从螺旋形容器中取出“浮子”，然后将其完全定位。由于螺旋只是一个设计，并且它相对于它的父亲定位，绝对定位似乎更有意义，你可以避免浮动的一些问题。

空div的高度为100％

2 个答案: