如何锁定div的x轴或y轴?

时间:2014-07-18 16:56:32

标签: css html5

我为工具菜单创建了一个小窗口,但因为我必须使用iframe来解决特定问题,所以它现在向左和向右滚动。我仍然需要它向上和向下滚动,但禁用左右。

<div id="map-tools">
                <form autocomplete="off" id=vis-select style="height:100%">
                <ul id="tools-list" data-role="listview" style="height:100%">
                    <li id="tools-4">
                            <fieldset data-role="controlgroup">
                                <g:if test="${site.javaScriptModules.find{it.fileName=='google-map.js'} }">
                                   <input name="radio-choice-v-2" id="google-map-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-map.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#google-map" >
                                    <label for="google-map-module">Google Map</label>
                                </g:if>
                                <g:if test="${site.javaScriptModules.find{it.fileName=='google-earth.js'} }">
                                    <input name="radio-choice-v-2" id="google-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-earth.js'}">checked="checked"</g:if> type="radio" data-active="false" data-messages="switch-vis" data-switch-vis="#google-earth" >    
                                    <label for="google-earth-module">Google Earth</label>
                                </g:if>
                                <g:if test="${site.javaScriptModules.find{it.fileName=='cesium.js'} }">
                                    <input name="radio-choice-v-2" id="cesium-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'cesium.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#cesium-earth" >  
                                    <label for="cesium-earth-module">Cesium Earth</label>
                                </g:if>     
                            </fieldset>
                    </li>
                </ul>
                </form>
                <iframe id="tools-cover-earth" class="cover" frameborder="0"></iframe>
            </div>

这是css

#map-tools{
    position:absolute;
    bottom: 44px;
    background:#ffffff;
    z-index: 10;
    width: 320px;
    height: 0px;
}

.cover{
    background:#ffffff;
    z-index: -1;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0px;
    overflow-x:hidden;
    overflow-y:hidden;
}

1 个答案:

答案 0 :(得分:0)

您可能需要在css中使用overflow,但为了获得更好的答案,您需要将整个有问题的代码包含在上下文中。 <div><ui></ui></div>什么也没告诉我们。