Question

由于header应该占据全宽，因此试图使content的宽度本质上与div相同。

尝试将overflow:auto应用于html,body,header

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <style>
        header {
            display:block;
            background: blue;
        }

        .content {
            width: 2000px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <header>header</header>
    <div class="content">content</div>

    </script>
</body>

</html>

期望水平滚动整个页面，并且header的宽度与content或body的宽度相同。

是否可以使header或div块超出视口的宽度而没有明确指定宽度？

Answer 1

为标头和内容添加一个包装div，并如下设置其样式。希望这是您正在寻找的。

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.GridPane;
import java.net.URL;
import java.util.ResourceBundle;

public class TheatreController implements Initializable {

    @FXML
    private GridPane middleGridPane;

    private final int MAX_ROW = 5;
    private final int MAX_COL = 5;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        int countRow = 1;
        ToggleButton[][] seats = new ToggleButton[MAX_ROW][MAX_COL];

        char lastRow = 'A' + (MAX_ROW - 1);

        for(char row = 'A'; row < lastRow; row++){
            for (int col = 1; col < MAX_COL; col++){
                seats[countRow][col] = new ToggleButton(String.format(row + "%02d", col));
                seats[countRow][col].setPrefWidth(50);
                middleGridPane.add(seats[countRow][col], countRow, col);

                //effectively final variable to use in handle method of EventHandler
                int finalCountRow = countRow;
                int finalCol      = col;

                seats[countRow][col].setOnAction(new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent event) {

                        //now you can get text from seats[finalCountRow][finalCol]
                        System.out.println(seats[finalCountRow][finalCol].getText());
                        event.getEventType().getName();
                    }
                });
            }
            countRow++;
        }
    }

    @FXML
    public void bookSeat(){

    }
}

.wrapper{
  float:left
}
header {
  display:block;
  background: blue;
}

.content {
  width: 2000px;
  background: yellow;
}

Answer 2

尝试一下，告诉我这是否是您想要的。

CSS

#scroller {
  position: absolute;
  height: 100%;
  overflow:scroll;
  overflow-y: hidden;
  white-space:nowrap;  
  background-color: red; 
}

#scroller-wrapper {
    height: 200px;
    width: 100%;
    background-color:red;
    position: relative;
}


.elem {
    height: 100%;
    width: 25%;
    display: inline-block;
}

HTML：

<div id="scroller-wrapper">
    <div id="scroller">
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
    <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
         <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
     </div>
</div>

这基本上将根据内容为您提供无限的水平滚动。

如果孩子超过100％，则扩展div

2 个答案: