设置一个带有左右两个面板的HTML页面。

Question

如何设置一个带有两个内容区域的HTML页面？不使用 <frames> ！

例如：

左侧应该是导航菜单。 右侧应该是页面的内容。

菜单示例:

<div id="page">
    <div id="menuleftcontent">
        <ul id="menu">
            <li> <a href="showfirstcontent">first</a></li>
            <li><a href="showsecondcontent">second</a></li>
        </ul>
    </div>
    <div id="maincontent">
        <div id="firstcontent">first</div>
        <div id="secondcontent">second</div>
    </div>
</div>

左侧的菜单应该是固定内容，右侧的内容可以更改。我已经画了一个草图:

谢谢。

- PMe

---

手绘图片点个赞。 - Thew

你的HTML是正确的，现在你只需要应用CSS。 - kennypu

你至少读过《寻找圣杯》这篇 A List Apart 文章吗？它没有起作用，它是如何失败的，你在实现它时遇到了什么问题？ - David Thomas

为了拥有动态内容，我已经在这里留下了解释：http://stackoverflow.com/questions/20176546/website-design-using-html-and-phpno-javascript-jquery-ajax/20176750#20176750 - Mimouni

@Salman 是的，就是这样。而且再加上这个。 - PMe

Answer 1

将代码重新排列，使主要内容在HTML源代码中位于侧边栏之前，添加一个清除浮动的div，并更改菜单链接的href属性：

<div id="page">
    <div id="maincontent">
        <div id="firstcontent">firstcontent</div>
        <div id="secondcontent">secondcontent</div>
    </div>
    <div id="menuleftcontent">
        <ul id="menu">
            <li><a href="#firstcontent">first</a></li>
            <li><a href="#secondcontent">second</a></li>
        </ul>
    </div>
    <div id="clearingdiv"></div>
</div>

然后使用以下CSS：

#page {
    margin-left: 200px;
}
#maincontent {
    float: right;
    width: 100%;
    background-color: #F0F0F0;
}
#menuleftcontent{
    float: left;
    width: 200px;
    margin-left: -200px;
    background-color: #CCCCCC;
}
#clearingdiv {
    clear: both;
}

对于您问题中的模糊部分，您需要使用JavaScript来显示/隐藏div。虽然可以使用原生JavaScript，但jQuery库使其更加容易：

$(function () {
    $("#maincontent > div:gt(0)").hide();
    $("#menu a").on("click", function (e) {
        var href = $(this).attr("href");
        $("#maincontent > " + href).show();
        $("#maincontent > :not(" + href + ")").hide();
    });
});

Demo here

- Salman A

---

好的，但问题是两个内容同时出现。我该如何设置，在页面加载时第一个内容出现，当我点击第二个菜单按钮时，第二个内容出现并且旧内容（第一个内容）消失。 - PMe

太好了！那个工作得很好。如果你现在能告诉我你的示例如何与bootstrap一起使用，例如我点击“报告”，然后一个新的空白页面出现，那么你就让我开心了！ - PMe

Bootstrap需要jQuery，因此上面的代码应该可以原样工作（我不确定您具体在问什么）。 - Salman A

很难解释... 这个例子 看起来不错。左边是菜单，右边是内容。当我点击“报告”时，在右侧应该出现示例中的“hello”，当我点击“概述”时，应该出现“byebye”... 我该如何实现？ - PMe

Answer 2

只需将以下CSS应用于您的HTML：

#page{
    width: 1280px;
    display: inline;
}

#menuleftcontent{
    float: left;
    width: 420px;
}

#maincontent{
    float: left;
    width: 960px;    
}

这里是一些示例；）

- ekans

---

你可以使用%代替px来实现可扩展的样式 :) - Mimouni

Answer 3

这是一个实现内容分割的示例。当然，实际上有很多方法可以做到这一点 :)

JS Fiddle

#page {
    width: 100%;
}

#menuleftcontent {
    float: left;
    width: 25%;
}

#maincontent {
    float: left;
    width: 75%;
}

- khakiout

Answer 4

您可以使用以下 CSS 代码来将您的 HTML 显示为左右分栏结构

    #menuleftcontent
    {
        width: 30%;
        float: left;
    }

    #maincontent
   {
        width: 70%;
        float: left;    
    }

   #page
   {
        width : 100%;
        clear : both;
    }

- Bhushan Kawadkar

Answer 5

如果您想知道如何在没有框架的情况下垂直分割页面，那么这里有一个答案https://dev59.com/pmgu5IYBdhLWcg3wASWO#11662564

如果您正在寻找一种解决方案，使每个页面都在左侧具有固定内容。那么您可以在后端Web框架中寻找称为页面模板或主页的东西。

- Kaoet

Answer 6

最好的方法是创建两个

元素，一个使用float: left属性并指定固定宽度，另一个使用与菜单相同宽度的margin-left属性。

CSS：

#leftie {
    width: 200px;
    background: red;
    float: left;
}

#rightie {
    margin-left: 200px;
    background: green;
}

HTML：

<div id="leftie">
    This is your menu
</div>

<div id="rightie">
    This is your main content
</div>

工作示例： http://fiddle.jshell.net/xynw4/show/ Fiddle网址： http://jsfiddle.net/xynw4/

- Thew

---

margin-left！这是不好的方式。如果你使用它，就无法拥有可扩展的样式。 - Mimouni

请解释为什么margin-left不是一个好的方式。 - Thew

为了良好的实践，你应该使用相对长度来创建灵活的布局。这有助于在智能手机和平板电脑上获得最佳预览效果。 - Mimouni

这是一种有争议的做法。但在非常小的屏幕上使用百分比可能会导致无法阅读或破碎（overflow不是通配符），这就是为什么很多框架不使用百分比，而是根据屏幕尺寸设置像素的原因。 - Thew

Answer 7

这是一个CSS样式你的HTML的例子：

  <style>
       .page{width:100%; min-height:900px;}
       .menuleftcontent{min-width:20%;float:left;height:900px;border:dotted 1px red;}
       .maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
    </style>



<div id="page" class="page">   
    <div id="menuleftcontent" class="menuleftcontent">
        <ul id="menu">
                       <li><a href="showfirstcontent" </a>first</li>
                        <li><a href="showsecondcontent" >second</a></li>

        </ul> 
    </div> 
    <div id="maincontent" class="maincontent">   
         <div id="firstcontent" >first</div>

         <div id="secondcontent">second</div>
    </div> 
</div>

- Mimouni