Question

我想只有一个列可滚动，而是两列在太多文本后滚动。这是我的html文件：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Dosis:600,500,400,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900,500' rel='stylesheet'
          type='text/css'>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 6
            });
            var infoWindow = new google.maps.InfoWindow({map: map});

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
        }

        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</head>

<body>
<div class="fluid-container">
    <div id="app-row"  class="row">
        <div id="app" style="overflow: auto;" class="col-xs-5">
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
        </div>
        <div id="map-container" style="overflow: hidden;" class="col-xs-7">
            <div id="map"></div>
        </div>
    </div>
</div>
</body>
</html>

我的test.css：

.fluid-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

.row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

html, body, .fluid-container, #app-row, #map-container {
    height: 100%
}

#app, #app ul {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}


#app-row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map {
    height: 100%;
    width: 100%;
}

我不知道我做错了什么，因为整页都在滚动。我认为过低：隐藏有助于解决这个问题。每一个帮助都会被贬低。

Answer 1

我只是想解决你的问题。据我说，你只需要为你的div添加一些样式，id是map-container。

（它将把位置添加到固定，右边添加到0px）

只需使用下面的代码替换您的代码

<div id="map-container" style="overflow: hidden; position:fixed; right:0px;" class="col-xs-7">

Answer 2

添加100%的高度，如此...

#app, #app ul {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    height:100%
}

行Bootstrap中的一个可滚动列

2 个答案: