CSS响应式布局,元素流畅且固定

时间:2013-08-27 17:47:44

标签: css wordpress responsive-design containers fluid-layout

我需要一点帮助,我正在为Wordpress开发一个自定义主题:http://bjorn.flabifitness.hu/

我需要一个固定的页眉,页脚,菜单区域。以及包含页面内容(图像)的流畅内容区域。

在浏览器窗口大小变化期间,只需将内容更改/调整为视图大小,无需滚动条,如果图​​片大于浏览器窗口或显示器,则应将其调整为大小浏览器窗口。 (流体)

页眉,页脚和菜单(垂直位置)应位于同一位置。 (固定)

这是我现在的CSS代码:(主要:所有页面,内部标题,容器(侧边栏,内容),页脚)

#main {
    position: absolute;
    background-color:#434343;
    z-index:0;
    display: block;
    opacity: 0;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-rendering: optimizeLegibility;
}
#header {
    background: #1d1d1d;
    margin: 0;
    padding-top: 15px;
    padding-left: 35px;
    padding-bottom: 13px;
    min-width: 100%;
    margin:0px auto;
}
#footer {
    clear: both;
    min-width: 100%;
}
#container {
    height: auto;
    overflow: hidden;
}

#sidebar {
    width: 242px;
    float: left;
    background: #434343;
    min-height: 92%;
}

#content {
    float: none;
    background: #434343;
    width: auto;
    overflow: hidden;
}

1 个答案:

答案 0 :(得分:1)

您可以使用CSS来流畅地缩放图像:

img {
  width: 100%;
  height: auto;
}