Question

他正在为我的应用程序开发标准模板。我很擅长使用CSS，而且我在制作一个好的响应式设计时很头疼。

现在这是我的想法：

enter image description here

这就是它的工作原理：

demo

现在有了一些java脚本，我可以这样做，但如果在CSS中这是可能的，那就太好了。我的问题是如何使用HTML和CSS进行设计。

jsFiddle只是前奏乐趣：

jsFiddle

我的css：

body{
    font-family:"Trebuchet MS",sans-serif;
    padding:0px;
    margin:0px;
}

#content{
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #5adc23;
}

input[type="button"]{
    border:2px outset rgb(166, 166, 166);
    display:inline-block;
}

input[type="button"]:hover{
    border:2px inset rgb(166, 166, 166);
    display:inline-block;
    cursor: pointer;
}

#mainbar{
    height: 31px;
    background-color: rgb(109, 164, 227);
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%);
}

    #mainbar_border{
        height: 100%;
        border-bottom:1px solid rgb(0, 0, 0);
        color: rgb(255, 255, 255); 
        font-family: 'Courier New', serif; 
        font-size: 21px; 
    }

#mainmenu{
    width: 40px;
    height: 96%;
    min-height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
}

    #mainmenu_border{
        height: 99%;
        padding: 4px;
        padding-top: 46px;
        padding-bottom: 19px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
    }

        #mainmenu_item_container{
            list-style-type:none;
        }

#content_app{
    float: left;
    width: 88%;
    height: 96%;
}

    #content_app_border{
        height: 99%;
        padding: 4px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-width: 1px;
        border-right-style: solid;
    }

我的HTML：

<div id='content' class='invoer'>    
    <div id='mainbar'>
        <div id='mainbar_border'>
            Mainbar
        </div>
    </div>
    <div id='mainmenu'>
        <div id='mainmenu_border'>
            <ul id='mainmenu_item_container'>
                <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li>
                <li>button</li>
                <li>button</li>
            </ul>
        </div>
    </div>
    <div id='content_app'>
        <div id='content_app_border'>
            content
            <br>
                <br>
                    <br>
         </div>
     </div>
</div>

Answer 1

This JsFiddle将为您提供图表所需布局的粗略版本。从这里开始，您可以使用媒体查询，因为Jefferson建议为移动设备创建备用版本。一个提示 - 这里的div应该用作骨架，我不会尝试设置它们。如果您开始为它们添加边框和其他一些样式，则边缘将不再对齐。这是CSS和HTML -

<div id="header">Header</div>
<div id="left_nav">Left Navigation</div>
<div id="content">Content</div>

div {
    position: absolute;
}

#header {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: blue;
}

#left_nav {
    top: 40px;
    left: 0px;
    width: 100px;
    bottom: 0px;
    background: red;
}

#content {
    top: 40px;
    left: 100px;
    bottom: 0px;
    right: 0px;
    background: green;
}

更新：在您最后一次评论之后，我对此进行了更多的研究。首先，根据我的理解，这是你的标准：

左侧菜单和内容应从顶部向下开始100px以容纳标题。
左边的manu和内容应至少扩展到页面底部。
如果左侧菜单或内容溢出超出页面底部，则：一个。它们都应该向下扩展，以便它们的高度相等。湾整个页面应滚动，而不是单个面板。

考虑到这一点，我无法完全用CSS和HTML生成所有这些效果，所以看起来这里可能需要Javascript。我已更新this JSFiddle，以便显示#main_container的溢出。此时，解决方案完成1,2和3b。要完成3a，我添加了这个javascript：

$(document).ready(function(){
    var body_height = $("body").height();
    var body_scroll = $("body").get(0).scrollHeight;
    var menu_height = $("#left_nav").height();
    var content_height = $("#content").height();

    if(body_scroll > body_height && (menu_height != content_height)) {
        if(menu_height > content_height) {
            $("#content").css("height", (menu_height + "px"));
        } else {
            $("#left_nav").css("height", (content_height + "px"));
        }
    }
});

这样做可以确保#left_nav和#content的高度相同。它确实使用JQuery，所以如果你不使用JQuery，你将不得不为纯Javascript重写它。但是，如果你不使用JQuery，我强烈建议你得到它here。它会让你的生活更轻松。另请注意#spike div，它提供了在其中一个定位元素中添加“border”div的示例。

希望这有帮助。

Answer 2

您可以使用css框架精简twitter.github.io/bootstrap，foundation.zurb.com或gumbyframework.com

这样您就不需要从地面构建所有东西。从响应脚手架，表格，表格，按钮，菜单等开始，您将获得很多样式。

作为初学者，可以更容易地建立好的和好的东西并从中学习。

Answer 3

让设计快速响应的一种简便方法是使用media queries。
这只需要html和css。您可以修复自己的媒体查询，或使用预制的响应框架。例如twitter bootstrap。

CSS3中的媒体查询会查看设备的功能，您可以使用它们来检查各种事物。例如：

- 宽度和高度（浏览器窗口）
- 设备宽度和高度
- 方向 - 例如是横向或纵向模式的手机？ - 决议

然后，您可以根据这些功能设置html样式。

Answer 4

使用像Bootstrap这样的现有框架可能是一个好主意，如果你自己做这件事感到不舒服。你上面描述的内容并不真正需要媒体查询，因为它确实是一个相当基本的流畅布局。

以下内容以基本形式实现您的目标

html：

<div id="content" class="invoer">
    <div id="mainbar">
        Mainbar
    </div>
    <div id="mainmenu">
            <ul>
                <li>button</li>
                <li>button</li>
            </ul>
    </div>
    <div id="content_app">
            <br>blablabla content
            <hr>
            <br>blablabla content
    </div>
</div>

CSS

#content {
    background:#00E113
}
#mainbar {
    width:98%;
    height:40px;
    background:#00ACD9;
    color:#fff;
    padding:1%;
}
#mainmenu {
    width:100px;
    position:absolute;
    left:0;
}
#content_app {
    margin-left:140px;
}

这里我使用绝对定位的主菜单，这样它不会影响任何周围元素的宽度。然后在content_app上设置一个margin-left，为主菜单留出足够的空间。

在这里试试 http://jsfiddle.net/PMJBc/2/

如何让我的CSS响应

4 个答案: