Question

尝试在图像中实现如图所示的布局。这是通过下面的工作代码实现的。这是最好的解决方案还是有其他可靠的替代方案可以产生相同的布局？

http://i50.photobucket.com/albums/f337/TheHoplite/layout.png

问题是边栏内容可滚动为溢出：自动和溢出：滚动似乎不起作用？

CSS

    html { overflow: hidden;}

    body {
        margin: 0;
        padding: 0;
        height: 100%;
        color: white;
    }

    #header, #footer, #left
    {
        position: absolute;
        width: 100%;
        left: 0;
    }

    #header 
    {
        top: 0;
        height: 50px;
        text-align: center;
    }

    #footer
    {
        bottom: 0;
        height: 50px;
        text-align: center;
    }

    #left
    {
        top: 50px;
        bottom: 50px;
        width: 250px;

        overflow: auto;

        padding-bottom: 20px;

        text-align: center;
    }

    #mapcontainer 
    {
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 250px;
        right: 0;
    }

</style>

HTML

     <script type="text/javascript"
            src="https://maps-api-ssl.google.com/maps/api/js?v=3&amp;sensor=false">
    </script>

</head>

<body onload="initialise();">

    <div id="header" style="background-color: black;">HEADER</div>

    <div id="container" style="background-color: yellow;">
        <div id="left" style="background-color: red;">SIDEBAR SCROLLABLE</div>
        <div id="mapcontainer" style="background-color: blue;">MAP</div>
    </div>

    <div id="footer" style="background-color: black">FOOTER<br></br></div>


    <script type="text/javascript">
        function initialise() {


            var myPos = new google.maps.LatLng(51 , 0);
            var myOptions = {
                zoom: 3,
                center: myPos,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("mapcontainer"),myOptions);
        }


    </script>
</body>

全高度地图，固定高度页眉和页脚和侧边栏问题

0 个答案: