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>

左侧的菜单应该是固定内容，正确的内容应该是可更改的。

我做了一个草图：

enter image description here

提前致谢

Answer 1

重新安排代码，以便（i）主要内容出现在HTML源顺序的侧边栏之前（ii）添加清除div（iii）更改菜单链接的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。虽然可以使用vanilla 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

Answer 2

如果您询问如何在没有框架的情况下垂直拆分页面。有一个答案https://stackoverflow.com/a/11662564/841037

如果您要找到一个解决方案，让每个页面都有左侧的固定内容。然后，您可以在后端Web框架中寻找称为页面模板或母版页的内容。

Answer 3

只需将一些css应用到你的html中：

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

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

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

宽度是一些例子;）

Answer 4

以下是如何实现拆分内容的示例。虽然，有很多方法可以做到这一点:)

JS Fiddle

#page {
    width: 100%;
}

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

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

Answer 5

您可以使用以下css为您的html在左右框架结构中显示它

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

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

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

Answer 6

你能做的最好就是制作2个div。一个使用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/

小提琴网址： http://jsfiddle.net/xynw4/

Answer 7

这是一个用于设置HTML样式的CSS示例：

  <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>

使用左右面板设置HTML页面

7 个答案: