css 调整 div 容器的大小以适应小窗口

Question

我的问题是容器不会调整大小以适应较小的屏幕或窗口大小缩小时。我尝试了百分比方法，将高度/宽度设置为 100% 甚至 50%，容器消失了。在这上面花了几个星期之后，我完全没有地方。 还需要支持 IE6，这让我很感动。

.ca-container{
 position:relative;
 margin:-45px auto 20px auto;
 width:990px;
 height:500px; 
}

.ca-wrapper{
 width:100%;
 height:100%;
 position:relative; 
}

.ca-more{
 position: absolute;
 bottom: 10px;
 right:0px;
 padding:4px 15px;
 font-weight:bold;
 background: #000;
 text-align:center;
 color: white;
 font-family: "Georgia","Times New Roman",serif;
 text-shadow:1px 1px 1px #897c63;    
}

.ca-item{
position:relative;
float:left;
width:330px;    
height:100%;
text-align:center; 
}

.ca-item-main{

 padding:20px;
 position:absolute;
 top:5px;
 left:5px;
 right:5px;
 bottom:5px;
 background:#fff;
 overflow:hidden;
 -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}

这是我网页的 html。我截断了它只是为了显示第一项的结构（我已经删除了我的内容）

        <div class="container">                
            <div></div>
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
                    <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"></div>
                            <h3></h3>
                            <h4></h4>
                            <a href="#" class="ca-more">Read...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <h6></h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p>xxxxxxxx </p>

                                </div>
                            </div>
                        </div>
                    </div>

原插件为循环内容轮播：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

我已经意识到原来的插件不这样做。如果我的代码太乱，请查看插件并使用演示源解决问题。

任何帮助将不胜感激 - 谢谢！

Answer 1

您看过媒体查询吗？ http://www.w3.org/TR/css3-mediaqueries/

您可以为不同尺寸的屏幕设置不同的 CSS - 目前互联网上有很多关于它们的信息。