Question

我正在尝试创建一个具有固定侧边栏和可滚动内容的网页。如果我没有标题div，它确实有效。如果我滚动页面，我有一些空的空间，以前是一个标题（我用红色标记它）。滚动浏览标题div后，我希望我的侧边栏覆盖空白区域。

这是我的HTML代码 - 我该如何解决这个问题？

<!doctype html>

<head>
    <link rel="stylesheet" href="style.css"type=" text/css"/>
</head>

<body>
    <div id="page">

        <div id="header">   
        </div>

        <div id="navigation">
            <ul>
                <li><a href="#home">home</a></li>
                <li><a href="#news">news</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#about">about</a></li>
            </ul>
        </div>

        <div id="content">
            <div id="abcd">
        </div>
    </div>
</body>

CSS

#page
{
    position:relative;
    width:100%;
    height:3000px;

    background-color:yellow;
}

#header
{
    background-color: blue;
    width:100%;
    height:150px;
}

#navigation
{

    background-color: red;
    width:10%;  
    height:3000px;
    float:left;

}

#content
{
    float:left;
    background-color: green;
    width:90%;  
    overflow: auto;
    height:1000px;
}

body 
{
    margin: 0;
}

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a 
{
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

Answer 1

您必须将导航div放在最外面的部分，即在正文中（不在任何其他div中）。

我已经对此进行了测试，现在工作正常。

您的新代码应为

<html>
<head>
    <link rel="stylesheet" href="style.css" type=" text/css" />
</head>

<body>
    <div id="navigation">
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#news">news</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#about">about</a></li>
        </ul>
    </div>

    <div id="page">

        <div id="header">

        </div>
        <div id="content">
            <div id="abcd">

            </div>

        </div>

    </div>
</body>
</html>

你修改过的css： -

#page {
    position: relative;
    width: 100%;
    height: 3000px;
    background-color: yellow;
}

#header {
    background-color: blue;
    width: 100%;
    height: 150px;
    display: block;
}

#navigation
{
    background-color: red;
    width:10%;
    height:100%;
    float:left;
    position: absolute;
    z-index:1;
}

#content {
    float: left;
    background-color: green;
    width: 90%;
    overflow: auto;
    height: 1000px;
}

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

在css中，我将导航的高度更改为100％，将z-index更改为1.

此外，您没有使用“page”类关闭div标签。

参考： - w3 css sidenav

Answer 2

请试试这个：

public class TwoFragment extends Fragment{

public TwoFragment() {
    // Required empty public constructor
}


GridView gridview;
List<ParseObject> ob;
ProgressDialog mProgressDialog;
GridViewAdapter adapter;
private List<GameList> gamearraylist = null;


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);


    new RemoteDataTask().execute();

}

// RemoteDataTask AsyncTask
private class RemoteDataTask extends AsyncTask<Void, Void, Void> {
    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        // Create a progressdialog
        mProgressDialog = new ProgressDialog(getContext());
        // Set progressdialog title
        mProgressDialog.setTitle("Place Holder Title");
        // Set progressdialog message
        mProgressDialog.setMessage("Loading...");
        mProgressDialog.setIndeterminate(false);
        // Show progressdialog
        mProgressDialog.show();
    }

    @Override
    protected Void doInBackground(Void... params) {
        // Create the array
        gamearraylist = new ArrayList<GameList>();
        try {
            // Locate the class table named "SamsungPhones" in Parse.com
            ParseQuery<ParseObject> query = new ParseQuery<ParseObject>(
                    "GamesList");
            // Locate the column named "position" in Parse.com and order list
            // by ascending
            query.orderByAscending("position");
            ob = query.find();
            for (ParseObject country : ob) {
                ParseFile image = (ParseFile) country.get("games");
                GameList map = new GameList();
                map.setGame(image.getUrl());
                gamearraylist.add(map);
            }
        } catch (ParseException e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return null;
    }

    @Override
    protected void onPostExecute(Void result) {
        // Locate the gridview in gridview_main.xml
        gridview = (GridView) getView().findViewById(R.id.gridView);

        // Pass the results into ListViewAdapter.java
        adapter = new GridViewAdapter(getContext(),
                gamearraylist);
        // Binds the Adapter to the ListView
        gridview.setAdapter(adapter);
        // Close the progressdialog
        mProgressDialog.dismiss();
    }
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_two,container,false);
    GridView gridView = (GridView) view.findViewById(R.id.gridView);


    gridView.setAdapter(new ImageAdapter1(view.getContext()));

    return view;

} }

固定侧边栏，可滚动内容

2 个答案: